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

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/dailyMaintenanceOrder/MaintenanceOrderModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,736 @@
<template>
  <a-modal
    :title="title"
    :width="1250"
    :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
                allow-clear
                :disabled="codeDisable"
                :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-select
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择对象部门'"
                :options="this.departs"
                style="width: 100%"
                v-decorator="['useId', validatorRules.useId]"
                @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
                :disabled="codeDisable"
                :placeholder="disableSubmit?'':'请选择保养标准'"
                :triggerChange="true"
                dictCode=""
                @change="(e)=>handleChange(e)"
                v-decorator="['maintenanceStandardId', validatorRules.maintenanceStandardId]"
              /> -->
              <a-input-search
                :disabled="disableSubmit"
                placeholder="请选择保养标准"
                enter-button
                @search="onSearchMaintenanceStandard()"
                :read-only="true"
                v-decorator="['maintenanceStandardNum', validatorRules.maintenanceStandardNum]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              label="设备编码/名称/型号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入设备编码/名称/型号'"
                v-decorator="['equipmentNum', validatorRules.equipmentNum ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          hidden
          :gutter="24"
        >
          <a-col :span="12">
            <a-form-item
              label="保养标准Id"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入保养标准Id'"
                v-decorator="['maintenanceStandardId', validatorRules.maintenanceStandardId ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="设备Id"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入设备编码/名称/型号'"
                v-decorator="['equipmentId', validatorRules.equipmentId ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="保养周期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                :placeholder="disableSubmit?'':'请选择保养周期'"
                :options="this.maintenanceCycles"
                @change="(e)=>handle3Change(e)"
                style="width: 100%"
                :disabled="disableSubmit"
                v-decorator="['maintenanceCycleId', validatorRules.maintenanceCycleId]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="计划开始时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-date
                :disabled="disableSubmit"
                v-decorator="['planStartTime', validatorRules.planStartTime ]"
                placeholder="请选择计划开始时间"
                style="width: 100%"
                :showTime="true"
                dateFormat="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24 / 2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="派工方式"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请选择派工方式'"
                :triggerChange="true"
                dictCode="assign_mode"
                v-decorator="['assignMode', validatorRules.assignMode]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24 / 2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="责任班组"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入责任班组'"
                v-decorator="['teamName', validatorRules.teamName ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          hidden
          :gutter="24"
        >
          <a-col :span="12">
            <a-form-item
              label="有效时长"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%"
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入有效时长'"
                v-decorator="['effectiveTime', validatorRules.effectiveTime ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="时间单位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入时间单位'"
                v-decorator="['unit', validatorRules.unit ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            v-if="!isHidden"
            :span="12"
          >
            <a-form-item
              label="责任人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-search
                :disabled="disableSubmit"
                placeholder="责任人"
                enter-button
                @search="onDutyUserList()"
                :read-only="true"
                v-decorator="['maintenanceUserName', validatorRules.maintenanceUserName]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          hidden
          :gutter="24"
        >
          <a-col :span="12">
            <a-form-item
              label="责任班组"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入责任班组'"
                v-decorator="['teamId', validatorRules.teamId ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="责任人/点检人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入责任人/点检人'"
                v-decorator="['maintenanceUserId', validatorRules.maintenanceUserId ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:3}"
              :wrapperCol="{span:21}"
              label="备注"
            >
              <a-textarea
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入备注'"
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey='id'
      :columns="columns"
      :dataSource="dataSource"
    >
      <!-- <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>
      </span> -->
      <template
        slot="photo"
        slot-scope="text,record"
      >
        <span
          v-if="!text"
          style="font-size: 12px;font-style: italic;"
        >无图片</span>
        <img
          v-else
          :src="getImgView(text)"
          :preview="record.maintenanceStandardDetailId"
          height="25px"
          alt=""
          style="max-width:80px;font-size: 12px;font-style: italic;"
        />
      </template>

      <!-- <span
        slot="action"
        slot-scope="text, record, index"
      >
        <a-popconfirm
          title="确定删除吗?"
          @confirm="() => handleDelete(text,record, index)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span> -->
    </a-table>
    <template slot="footer">
      <a-button
        :style="{marginRight: '8px'}"
        @click="handleCancel()"
      >
        å…³é—­
      </a-button>

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

    <daily-maintenance-standard-list
      ref="DailyMaintenanceStandardList"
      @sendMaintenanceStandardRecord='sendMaintenanceStandardRecord'
    ></daily-maintenance-standard-list>

    <user-list
      ref="UserList"
      @sendDutyUserRecord='sendDutyUserRecord'
    ></user-list>
  </a-modal>

</template>

<script>
import { getAction, postAction, requestPut } from '@/api/manage'
import pick from 'lodash.pick'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import Tooltip from 'ant-design-vue/es/tooltip'
import DailyMaintenanceStandardList from './DailyMaintenanceStandardList'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
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 UserList from '.././dailyInspectionOrder/UserList'

export default {
  name: "MaintenanceOrderModal",
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag,
    Tooltip,
    PdfView,
    preview,
    DailyMaintenanceStandardList,
    UserList
  },
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          width: 50,
        },
        {
          title: '部位',
          align: 'center',
          dataIndex: 'location'
        },
        {
          title: '保养项目',
          align: 'center',
          dataIndex: 'maintenanceProjectNum'
        },
        {
          title: '保养标准',
          align: 'center',
          dataIndex: 'standard'
        },
        {
          title: '方法',
          align: 'center',
          dataIndex: 'maintenanceMethod'
        },
        {
          title: '工具',
          align: 'center',
          dataIndex: 'maintenanceTool'
        },
        {
          title: '示意图',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: { customRender: 'photo' }
        },
        // {
        //   title: '维保专业',
        //   align: 'center',
        //   dataIndex: 'maintenanceSpecialty',
        // },
      ],
      title: "操作",
      visible: false,
      disableSubmit: false,
      codeDisable: true,
      isHidden: true,
      dataSource: [],
      model: {},
      departs: [],
      maintenanceCycles: [],
      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: '请输入保养工单编码!' },
          ]
        },
        useId: {
          rules: [
            { required: true, message: '请选择对象部门!' },
          ]
        },
        maintenanceCycleId: {
          rules: [
            { required: true, message: '请选择保养周期!' },
          ]
        },
        maintenanceStandardNum: {
          rules: [
            { required: true, message: '请选择保养标准!' },
          ]
        },
        equipmentNum: {
          rules: [
            { required: true, message: '请选择设备!' },
          ]
        },
        maintenanceUserName: {
          rules: [
            { required: true, message: '请维护责任人!' },
          ]
        },
        assignMode: {
          rules: [
            { required: true, message: '请维护派工方式!' },
          ]
        },
        teamName: {
          rules: [
            { required: true, message: '请维护责任班组!' },
          ]
        },
        planStartTime: {
          rules: [
            { required: true, message: '请维护计划开始时间!' },
          ]
        }
      },
      url: {
        add: "/eam/dailyMaintenanceOrder/add",
        edit: "/eam/dailyMaintenanceOrder/edit",
        getCycleByStandardId: "/eam/dailyMaintenanceOrder/getMaintenanceCycleByStandardId",
        getMaintenanceProjectList: "/eam/dailyMaintenanceOrder/getMaintenanceProjectId",
        getSysDeparts: "/eam/dailyMaintenanceOrder/getSysDeparts",
        list: "/eam/dailyMaintenanceOrder/getMaintenanceCycleByStandardId",
      },

    }
  },

  methods: {
    add() {
      this.edit({})
    },

    edit(record) {
      let that = this;
      this.getSysDeparts()
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.maintenanceCycles = record.maintenanceCycles
      if (record.dailyMaintenanceDetails != undefined) {
        const temp = [...record.dailyMaintenanceDetails];
        that.dataSource = temp;
        // for (let i = 0; i < temp.length; i++) {
        //   let r = temp[i].upload;
        //   r.src = this.getSrc(temp[i].upload);
        // }
      }
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'num', 'useId', 'maintenanceStandardNum',
          'effectiveTime', 'equipmentNum', 'maintenanceStandardId', 'equipmentId', 'maintenanceCycleId',
          'planStartTime', 'assignMode', 'teamName', 'unit', 'teamId', 'remark'));
      });
      if (record.id) {
        if ("3" == record.assignMode) {
          this.isHidden = false
        } else {
          this.isHidden = true
        }
        this.codeDisable = true;
      } else {
        this.isHidden = true
        this.codeDisable = false;
      }
    },

    onDutyUserList() {
      let data = this.form.getFieldsValue(['teamId']);
      if (data.teamId == null || data.teamId == "") {
        this.$message.warning("请先维护班组！");
        return
      }
      this.$refs.UserList.list(data.teamId);
      this.$refs.UserList.title = "选择人员";
    },
    sendDutyUserRecord(data) {
      let record = data.record;
      this.form.setFieldsValue({ maintenanceUserId: record.id, maintenanceUserName: record.username + "/" + record.realname });
    },

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

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

    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          formData.dailyMaintenanceOrderDetails = that.dataSource;
          let obj;
          if (!this.model.id) {
            obj = postAction(this.url.add, 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);
    },

    onSearchMaintenanceStandard() {
      let data = this.form.getFieldsValue(['useId']);
      if (data.useId == null || data.useId == "") {
        this.$message.warning("请先选择对象部门!");
        return
      }
      this.$refs.DailyMaintenanceStandardList.list(data.useId);
      this.$refs.DailyMaintenanceStandardList.title = "选择日常保养标准";
    },
    sendMaintenanceStandardRecord(data) {
      let record = data.record;
      this.form.setFieldsValue({ equipmentId: record.equipmentId, maintenanceStandardId: record.id, equipmentNum: record.equipmentNum, maintenanceStandardNum: record.num, maintenanceCycleId: null });
      this.form.setFieldsValue({ assignMode: record.assignMode, teamId: record.teamId, teamName: record.teamName });
      this.getCycleByStandardId(record.id);
      if ("3" == record.assignMode) {
        this.isHidden = false
      } else {
        this.isHidden = true
      }
    },

    getCycleByStandardId(maintenanceStandardId) {
      getAction(this.url.getCycleByStandardId, { maintenanceStandardId: maintenanceStandardId }).then((res) => {
        if (res.success) {
          this.maintenanceCycles = res.result
          this.dataSource = [];
        }
      })
    },

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

    handle3Change(val) {
      let data = this.form.getFieldsValue(['maintenanceStandardId']);
      getAction(this.url.getMaintenanceProjectList, { maintenanceStandardId: data.maintenanceStandardId, maintenanceCycleId: val }).then((res) => {
        if (res.success) {
          this.dataSource = res.result;
          if (res.result.length == 0) {
            this.form.setFieldsValue({ "effectiveTime": null, "unit": null })
          } else {
            this.form.setFieldsValue({ "effectiveTime": res.result[0].effectiveTime, "unit": res.result[0].unit })
          }
        }
      })
    },


    handle2Change(val) {
      this.maintenanceCycles = [];
      this.dataSource = [];
      this.form.setFieldsValue({ equipmentId: null, maintenanceStandardId: null, equipmentNum: null, maintenanceStandardNum: null, maintenanceCycleId: null })
    },

    // 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 == 'inspectionCycleId') {
    //       target[column.dataIndex] = value;
    //     }
    //     //显示带过来的数据
    //     that.dataSource = temp;
    //   }
    // },


  },
}
</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>