Merge branch 'develop' of http://117.34.109.166:18448/r/vue_mdc_430

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/specialtyMaintenanceStandard/SpecialtyMaintenanceStandardModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,857 @@
<template>
  <a-modal
    :title="title"
    :width="1500"
    :visible="visible"
    :maskClosable="false"
    @ok="handleOk"
    cancelText="关闭"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="标准编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allowClear
                :disabled="disableSubmit||isRevise"
                :placeholder="disableSubmit?'':'请输入标准编码'"
                v-decorator="[ 'num', validatorRules.num]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="设备名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-search
                :disabled="disableSubmit"
                placeholder="请选择设备"
                enter-button
                @search="onEquipmentList()"
                :read-only="true"
                v-decorator="['equipmentName', validatorRules.equipmentName]"
              />
            </a-form-item>
          </a-col>
          <a-col
            :span="12"
            hidden
          >
            <!-- v-if="false" -->
            <a-form-item
              label="设备名称Id"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="disableSubmit"
                placeholder="请选择设备名称Id"
                enter-button
                :read-only="true"
                v-decorator="['equipmentId', {}]"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-item
              label="对象部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请对象部门'"
                :triggerChange="true"
                dictCode="sys_depart,depart_name,id,version = '7' and del_flag!='1'"
                v-decorator="['departId', validatorRules.departId]"
                @change="(e)=>handle2Change(e)"
              />
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="对象部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :placeholder="disableSubmit?'':'请选择对象部门'"
                :triggerChange="true"
                :disabled="true"
                dictCode="sys_depart,depart_name,id"
                v-decorator="['departId', validatorRules.departId]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="版本"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allowClear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入版本号'"
                v-decorator="[ 'version', validatorRules.version]"
              />
            </a-form-item>
          </a-col>
          <a-col
            v-if="this.isRevise == true"
            :span="12"
          >
            <a-form-item
              label="历史版本"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allowClear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入历史版本号'"
                v-decorator="[ 'historyVersion', validatorRules.historyVersion]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="备注"
              :labelCol="{span:3}"
              :wrapperCol="{span:21}"
            >
              <a-textarea
                allowClear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入备注'"
                v-decorator="[ 'remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <a-button
      type="primary"
      :style="{ marginRight: '8px',marginBottom:'8px' }"
      :loading="confirmLoading"
      @click="selectMaintenanceProjects()"
    >保养项目</a-button>
    <a-table
      ref="table"
      bordered
      :scroll="{ x: 'calc(1200px + 50%)', y: 900 }"
      size="middle"
      rowKey='id'
      :columns="columns"
      :dataSource="dataSource"
    >
      <template
        v-for="col in columns"
        :slot="col.dataIndex"
        slot-scope='text, record, index'
      >
        <div :key="col.dataIndex">

          <a-select
            v-if="col.dataIndex == 'maintenanceCycleId'"
            :value="text"
            :options="record.maintenanceCycles"
            @change="(e) => handleChange(e, record.key, col, index)"
            style="width: 100%"
            :disabled="false"
          />
          <a-select
            v-if="col.dataIndex == 'maintenanceMode'"
            :value="text"
            :options="record.maintenanceModes"
            @change="(e) => handleChange(e, record.key, col, index)"
            style="width: 100%"
            :disabled="false"
          />
          <a-textarea
            :value="text"
            v-if="col.dataIndex == 'maintenanceRequire'"
            :maxLength="500"
            auto-size
            placeholder="请输入安全要求"
            @change="(e)=>handleChange(e, record.key, col, index)"
          />
          <a-textarea
            :value="text"
            v-if="col.dataIndex == 'location'"
            :maxLength="500"
            auto-size
            placeholder="请输入保养部位"
            @change="(e)=>handleChange(e, record.key, col, index)"
            :disabled="true"
          />
          <j-image-upload
            :value="text"
            v-if="col.dataIndex == 'photo'"
            :isMultiple="false"
            auto-size
            placeholder="请上传图片"
            @change="(e)=>handleChange(e, record.key, col, index)"
          ></j-image-upload>
        </div>
      </template>

      <span
        slot="action"
        slot-scope="text, record, index"
      >
        <a-popconfirm
          title="确定删除吗?"
          @confirm="() => handleDelete(text,record, index)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>

      <!-- <span
        slot="photo"
        slot-scope="text,record"
      > -->
      <!-- <Tooltip
          placement="top"
          title="预览图片"
        >
          <img
            v-if=" record.upload.path && (record.upload.format.toLowerCase()=='jpg'||record.upload.format.toLowerCase()=='bmp'||record.upload.format.toLowerCase()=='png'||record.upload.format.toLowerCase()=='jpeg'||record.upload.format.toLowerCase()=='gif')"
            width="30"
            height="14"
            border="1"
            draggable="false"
            preview="1"
            :preview-text="''"
            :src="record.upload.src"
          />
        </Tooltip>
        <a
          v-if="record.upload.path && record.upload.format.toLowerCase()=='pdf'"
          href="javascript:;"
          @click="view(record.upload)"
        >
          é¢„览
        </a>

        <a-divider
          v-if="record.upload.path && (record.upload.format.toLowerCase()=='jpg'||record.upload.format.toLowerCase()=='bmp'||record.upload.format.toLowerCase()=='png'||record.upload.format.toLowerCase()=='jpeg'||record.upload.format.toLowerCase()=='gif'||record.upload.format.toLowerCase()=='pdf')"
          type="vertical"
        />
        <a
          href="javascript:;"
          @click="handleUpload(record)"
        >上传</a> -->
      <!-- </span> -->
    </a-table>
    <template slot="footer">
      <a-button
        :style="{marginRight: '8px'}"
        @click="handleCancel()"
      >
        å…³é—­
      </a-button>

      <a-button
        @click="handleOk()"
        type="primary"
        :loading="confirmLoading"
      >确定</a-button>
    </template>

    <pdf-view ref="pdfview"></pdf-view>
    <upload-model
      ref="modalForm"
      @ok="modalFormOk"
    ></upload-model>

    <j-select-maintenance-standard-modal ref="maintenanceStandardModalForm"></j-select-maintenance-standard-modal>
    <equipment-list
      ref="EquipmentList"
      @sendEquipmentRecord='sendEquipmentRecord'
    ></equipment-list>
  </a-modal>

</template>

<script>
import { getAction, postAction, requestPut, deleteAction } from '@/api/manage'
import pick from 'lodash.pick'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import { duplicateCheck } from '@/api/api'
import Tooltip from 'ant-design-vue/es/tooltip'
import JSelectMaintenanceStandardModal from './JSelectMaintenanceStandardModal'
import UploadModel from './UploadModel'

import { preview } from 'vue-photo-preview'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import PdfView from '@views/common/PdfView'
import { getFileAccessHttpUrl } from '@/api/manage';
import EquipmentList from './EquipmentList'

export default {
  name: "SpecialtyMaintenanceStandardModal",
  components: {
    JMultiSelectTag,
    Tooltip,
    JSelectMaintenanceStandardModal,
    UploadModel,
    PdfView,
    preview,
    EquipmentList
  },
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          width: 50,
        },
        // {
        //   title: 'id',
        //   align: 'center',
        //   dataIndex: 'id'
        // },
        {
          title: '保养项目',
          align: 'center',
          dataIndex: 'name',
          width: 100,
        },

        {
          title: '保养标准',
          align: 'center',
          dataIndex: 'standard',
          width: 100,
        },
        {
          title: '方法',
          align: 'center',
          dataIndex: 'maintenanceMethodName',
          width: 100,
        },
        {
          title: '工具',
          align: 'center',
          dataIndex: 'maintenanceTool',
          width: 100,
        },
        {
          title: '维保专业',
          align: 'center',
          dataIndex: 'maintenanceSpecialtyName',
          width: 100,
        },
        {
          title: '安全要求',
          align: 'center',
          dataIndex: 'maintenanceRequire',
          scopedSlots: { customRender: 'maintenanceRequire' },
          width: 140,
        },
        {
          title: '工时定额',
          align: 'center',
          dataIndex: 'workingHourQuota',
          width: 100,
        },
        {
          title: '示意图',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: { customRender: 'photo' },
          width: 140,
        },
        {
          title: '保养部位',
          align: 'center',
          dataIndex: 'location',
          scopedSlots: { customRender: 'location' },
          width: 140,
        },
        {
          title: '周期',
          align: 'center',
          dataIndex: 'maintenanceCycleId',
          scopedSlots: { customRender: 'maintenanceCycleId' },
          width: 140,
        },
        {
          title: '维保方式',
          align: 'center',
          dataIndex: 'maintenanceMode',
          scopedSlots: { customRender: 'maintenanceMode' },
          width: 140,
        },

        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          },
          width: 140,
        }
      ],
      title: "操作",
      visible: false,
      visible4Confirm: false,
      disableSubmit: false,
      codeDisable: true,
      isRevise: false,
      model: {},
      upload: {},
      maintenanceCycles: {},
      maintenanceModes: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入编码!' },
          ]
        },
        teamId: {
          rules: [
            { required: true, message: '请选择责任班组!' },
          ]
        },
        departId: {
          rules: [
            { required: true, message: '请选择对象部门!' },
          ]
        },
        equipmentId: {
          rules: [
            { required: true, message: '请选择设备!' },
          ]
        },
        equipmentName: {
          rules: [
            { required: true, message: '请选择设备!' },
          ]
        },
        version: {
          rules: [
            { required: true, message: '请输入版本!' },
          ]
        },
      },
      url: {
        list: "/eam/maintenanceStandardDetail/getMaintenanceStandardDetailListByIds",
        add: "/eam/maintenanceStandard/add",
        edit: "/eam/maintenanceStandard/edit",
        addDetail: "/eam/maintenanceStandardDetail/add",
        getMaintenanceCycle: "/eam/maintenanceStandardDetail/getMaintenanceCycle",
        getMaintenanceMode: "/eam/maintenanceStandardDetail/getMaintenanceMode",
        realDelete: "/eam/maintenanceStandardDetail/realDelete",
        revise: '/eam/maintenanceStandard/revise',
        getReviseVersion: "/eam/maintenanceStandard/getReviseVersion"
      },

      dataSource: [],
    }
  },


  mounted() {
    this.$bus.$on('selectionRows', (data) => {
      for (let i = 0; i < data.length; i++) {
        let id = this.getUuiD(15);
        this.dataSource.push({
          id: id,
          maintenanceProjectId: data[i].id,
          name: data[i].name,
          standard: data[i].standard,
          location: data[i].location,
          maintenanceMethodName: data[i].maintenanceMethod_dictText,
          maintenanceTool: data[i].maintenanceTool,
          maintenanceSpecialtyName: data[i].maintenanceSpecialtyId_dictText,
          maintenanceRequire: data[i].maintenanceRequire,
          workingHourQuota: data[i].workingHourQuota,
          upload: this.upload,
          maintenanceCycles: this.maintenanceCycles,
          maintenanceModes: this.maintenanceModes,
        })

        // let formData = {};
        // this.confirmLoading = true;
        // formData.maintenanceStandardDetailList = this.dataSource
        // postAction(this.url.addDetail, formData).then((res) => {
        //   if (res.success) {
        //     // this.$message.success(res.message);
        //     // this.$emit('ok');
        //   } else {
        //     // this.$message.warning(res.message);
        //   }
        // }).finally(() => {
        //   this.confirmLoading = false;
        // })

      }
    })
  },

  created() {
    var upload = {};
    upload.path = null;
    upload.format = 'jpg';
    this.upload = upload;
  },


  methods: {

    //选择点检项目
    selectMaintenanceProjects: function () {
      let ids = [];
      for (let i = 0; i < this.dataSource.length; i++) {
        ids.push(this.dataSource[i].maintenanceProjectId);
      }
      this.$refs.maintenanceStandardModalForm.showModals(ids);
      this.$refs.maintenanceStandardModalForm.title = '选择保养项目';
      this.$refs.maintenanceStandardModalForm.disableSubmit = false;
    },

    add() {
      this.edit({ maintenanceStandardDetaillist: [] })

    },

    edit(record) {
      let that = this;
      this.getMaintenanceCycle()
      this.getMaintenanceMode()
      this.dataSource = [];
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      if (record.maintenanceStandardDetaillist != undefined) {
        const temp = [...record.maintenanceStandardDetaillist];
        // for (let i = 0; i < temp.length; i++) {
        //   let r = temp[i].upload;
        //   r.src = this.getSrc(temp[i].upload);
        // }
        that.dataSource = temp;
      }
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'version', 'num', 'departId', 'teamId', 'equipmentId', 'equipmentName', 'remark'));
      });
      if (record.id) {
        that.codeDisable = true;
        that.$nextTick(() => {
          if (that.isRevise) {
            requestPut(that.url.getReviseVersion, record).then((res) => {
              if (res.success) {
                that.form.setFieldsValue({ version: res.result, historyVersion: record.version })
              }
            })
          }
        }, 200);
      } else {
        that.codeDisable = false;
        that.$nextTick(() => {
          that.form.setFieldsValue({ "version": "1.0", })
        });
      }
    },

    close() {
      this.$emit('close');
      this.visible = false;
    },

    handleCancel() {
      this.realDelete()
      this.close();
    },

    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          console.log(formData)
          if (that.dataSource.length === 0) {
            that.$message.warning("请选择保养项目！");
            that.confirmLoading = false;
            return
          }
          for (var i = 0; i < that.dataSource.length; i++) {
            if (that.dataSource[i].maintenanceRequire == null || that.dataSource[i].maintenanceRequire == undefined || that.dataSource[i].maintenanceRequire == '') {
              this.$message.error("第" + (i + 1) + "行安全要求为空，请填写")
              that.confirmLoading = false
              return false;
            }
            if (that.dataSource[i].photo == null || that.dataSource[i].photo == undefined || that.dataSource[i].photo == '') {
              this.$message.error("第" + (i + 1) + "行示意图为空，请上传")
              that.confirmLoading = false
              return false;
            }
            if (that.dataSource[i].location == null || that.dataSource[i].location == undefined || that.dataSource[i].location == '') {
              this.$message.error("第" + (i + 1) + "行部位为空，请填写")
              that.confirmLoading = false
              return false;
            }
            if (that.dataSource[i].maintenanceCycleId == null || that.dataSource[i].maintenanceCycleId == undefined) {
              this.$message.error("第" + (i + 1) + "行周期为空，请选择")
              that.confirmLoading = false
              return false;
            }
            if (that.dataSource[i].maintenanceMode == null || that.dataSource[i].maintenanceMode == undefined || that.dataSource[i].maintenanceMode == '') {
              this.$message.error("第" + (i + 1) + "行维保方式为空，请选择")
              that.confirmLoading = false
              return false;
            }



          }
          formData.maintenanceStandardDetaillist = that.dataSource;
          formData.type = 'specialty';
          let obj;
          if (!this.model.id) {
            formData.versionStatus = '1'
            obj = postAction(this.url.add, formData);
          } else {
            if (this.isRevise) {
              formData.versionStatus = '1'
              obj = postAction(this.url.revise, formData);
            } else {
              obj = requestPut(this.url.edit, formData, { id: this.model.id });
            }
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },

    handleDelete(text, record, index) {
      this.dataSource.splice(index, 1);
    },

    realDelete() {
      var that = this
      deleteAction(that.url.realDelete).then(res => {
        if (res.success) {
          //重新计算分页问题
          // that.reCalculatePage(1)
          // that.$message.success(res.message)
          // that.loadData()
        } else {
          // that.$message.warning(res.message)
        }
      })
    },

    getMaintenanceCycle() {
      getAction(this.url.getMaintenanceCycle).then((res) => {
        if (res.success) {
          this.maintenanceCycles = res.result
        }
      })
    },

    getMaintenanceMode() {
      getAction(this.url.getMaintenanceMode).then((res) => {
        if (res.success) {
          this.maintenanceModes = res.result
        }
      })
    },

    handle2Change(val) {
      this.dataSource = [];
    },

    handleChange(value, key, column, index) {
      let that = this;
      const temp = [...that.dataSource];
      const target = temp.filter(item => key === item.key)[index];
      if (target) {
        if (column.dataIndex == 'maintenanceCycleId') {
          target[column.dataIndex] = value;
        }
        if (column.dataIndex == 'maintenanceRequire') {
          target[column.dataIndex] = value.target.value;
        }
        if (column.dataIndex == 'location') {
          target[column.dataIndex] = value.target.value;
        }
        if (column.dataIndex == 'maintenanceMode') {
          target[column.dataIndex] = value;
        }
        if ('photo' == column.dataIndex) {
          target['photo'] = value;
        }
        //显示带过来的数据
        that.dataSource = temp;
      }
    },

    handleUpload: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "文件上传";
      this.$refs.modalForm.disableSubmit = false;
    },

    modalFormOk() {
      let ids = [];
      for (let i = 0; i < this.dataSource.length; i++) {
        ids.push(this.dataSource[i].id);
      }
      postAction(this.url.list, { ids: ids }).then(res => {
        if (res.success) {

          this.dataSource = res.result.records || res.result
          for (let i = 0; i < this.dataSource.length; i++) {
            let r = this.dataSource[i].upload;
            r.src = this.getSrc(this.dataSource[i].upload);
          }

        } else {
          this.$message.warning(res.message)
        }
      })
    },

    getSrc(record) {

      if (!record.path) {
        return '';
      }
      //本地：local\Minio：minio\阿里云：alioss
      if (record.uploadType == 'local') {

        let ssoLoginFlag = Vue.ls.get("ssoLoginFlag");
        let deployMode = Vue.ls.get("deployMode");

        if (ssoLoginFlag && deployMode == "container") {
          var baseProject = Vue.ls.get("baseProject");
          console.log("baseProject==>" + baseProject)

          var hostname = window.location.protocol + "//" + window.location.host;
          var url = hostname + '/' + baseProject + '/sys/common/static';
          return getFileAccessHttpUrl(record.path + record.encodeName, url, window._CONFIG['hyperTextTransfer'])
        } else {
          //根据发布状态修改https æˆ– http
          return getFileAccessHttpUrl(record.path + record.encodeName, this.url.urlDownload, window._CONFIG['hyperTextTransfer'])
        }

      } else if (record.uploadType == 'alioss') {

        const OSS = require('ali-oss')
        const client = new OSS({
          // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
          region: window._CONFIG['region'],
          // é˜¿é‡Œäº‘主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
          accessKeyId: window._CONFIG['accessKeyId'],
          accessKeySecret: window._CONFIG['accessKeySecret'],
          bucket: window._CONFIG['bucket'],
        })
        // object-key表示从OSS下载文件时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
        return client.signatureUrl(record.path)
      }
    },

    view(record) {
      this.$refs.pdfview.showPdf(record.src);
    },

    getUuiD(randomLength) {
      return Number(
        Math.random()
          .toString()
          .substr(2, randomLength) + Date.now()
      ).toString(36)
    },
    onEquipmentList() {
      this.$refs.EquipmentList.selectedDeparts = true;
      this.$refs.EquipmentList.title = "选择设备信息";
      this.$refs.EquipmentList.list();
    },
    sendEquipmentRecord(data) {
      this.dataSource = [];
      let record = data.record;
      console.log(record.id)
      this.form.setFieldsValue({ departId: record.useId, equipmentId: record.id, equipmentName: record.num + "/" + record.name + "/" + record.model });
    },


  },
}
</script>

<style lang="less" scoped>
/deep/ .frozenRowClass {
  color: #c9c9c9;
}
.fontweight {
  font-weight: bold;
}
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>