zenglf
2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54
src/views/eam/modules/malfunctionRepair/MalfunctionRepaireModal.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,447 @@
<template>
  <a-modal
    :title="title"
    :width="1200"
    :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="24/2">
            <a-form-item
              label="单据号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="disableSubmit"
                placeholder="请输入单据号"
                v-decorator="['num', validatorRules.num]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="是否停机维修"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择是否停机维修'"
                :triggerChange="true"
                dictCode="is_stop"
                v-decorator="['isStop', validatorRules.isStop]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="设备编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-search
                :disabled="disableSubmit"
                placeholder="请选择设备!"
                enter-button
                @search="onSearchEquipmentList()"
                :read-only="true"
                v-decorator="['equipmentNum', validatorRules.equipmentNum]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="故障时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-date
                :disabled="disableSubmit"
                style="width: 100%"
                placeholder="请选择故障时间"
                :showTime="true"
                dateFormat="YYYY-MM-DD HH:mm:ss"
                v-decorator="['faultTime', validatorRules.faultTime]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="设备名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="true"
                enter-button
                :read-only="true"
                v-decorator="['equipmentName', validatorRules.equipmentName]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="设备规格"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="true"
                enter-button
                :read-only="true"
                v-decorator="['equipmentSpecification', validatorRules.equipmentSpecification]"
              />
            </a-form-item>
          </a-col>
          <a-row
            hidden
            :gutter="24"
          >
            <a-col :span="12">
              <a-form-item
                label="设备Id"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  :disabled="true"
                  :placeholder="disableSubmit?'':'请输入设备编码/名称/型号'"
                  v-decorator="['equipmentId', validatorRules.equipmentId ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="使用部门Id"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  :disabled="true"
                  :placeholder="disableSubmit?'':'请输入使用部门id'"
                  v-decorator="['useDepartId', validatorRules.useDepartId ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="设备型号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="true"
                enter-button
                :read-only="true"
                v-decorator="['equipmentModel', validatorRules.equipmentModel]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="使用部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <!-- <a-select
                :placeholder="disableSubmit?'':'请选择使用部门'"
                :options="this.departs"
                style="width: 100%"
                :disabled="disableSubmit"
                v-decorator="['useDepartId', validatorRules.useDepartId]"
              /> -->
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入使用部门'"
                v-decorator="['departName', validatorRules.departName ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="紧急程度"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择紧急程度'"
                :triggerChange="true"
                dictCode="urgency"
                v-decorator="['urgency', validatorRules.urgency]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="故障描述"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-textarea
                :disabled="disableSubmit"
                allow-clear
                :rows="5"
                placeholder="请输入故障描述"
                v-decorator="['faultDescription', validatorRules.faultDescription]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="备注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-textarea
                :disabled="disableSubmit"
                allow-clear
                :rows="5"
                placeholder="请输入备注"
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="24">
          <a-col :span="24/2">
            <a-form-item
              label="故障照片"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-image-upload
                :disabled="disableSubmit"
                :isMultiple="true"
                v-decorator="['photo', {}]"
              ></j-image-upload>
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form>
    </a-spin>
    <template slot="footer">
      <a-button
        :style="{marginRight: '8px'}"
        @click="handleCancel()"
      >
        å…³é—­
      </a-button>
      <a-button
        @click="handleOk()"
        type="primary"
        :loading="confirmLoading"
      >确定</a-button>
    </template>
    <equipment-list
      ref="EquipmentList"
      @sendEquipmentRecord='sendEquipmentRecord'
    ></equipment-list>
  </a-modal>
</template>
<script>
import { getAction, postAction, requestPut } 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 JImageUpload from '@/components/jeecg/JImage2Upload'
import EquipmentList from './EquipmentList'
import Vue from 'vue'
export default {
  name: "MalfunctionRepaireModal",
  components: {
    JMultiSelectTag,
    Tooltip,
    // JImageUpload,
    EquipmentList
  },
  data() {
    return {
      title: "操作",
      visible: false,
      disableSubmit: false,
      codeDisable: true,
      model: {},
      departs: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入入库单编号!' },
          ]
        },
        isStop: {
          rules: [
            { required: true, message: '请选择是否停机!' },
          ]
        },
        equipmentNum: {
          rules: [
            { required: true, message: '请选择设备!' },
          ]
        },
        faultTime: {
          rules: [
            { required: true, message: '请选择故障时间!' },
          ]
        },
      },
      url: {
        add: "/eam/equipmentReportRepair/add",
        edit: "/eam/equipmentReportRepair/edit",
        getSysDeparts: "/eam/equipment/getSysDeparts",
      },
      dataSource: [],
    }
  },
  created() {
    this.getSysDeparts()
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      let that = this;
      that.dataSource = [];
      that.form.resetFields();
      that.model = Object.assign({}, record);
      that.visible = true;
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'num', 'isStop', 'equipmentId', 'equipmentNum', 'equipmentName', 'equipmentModel', 'equipmentSpecification', 'urgency', 'useDepartId', 'departName', 'faultDescription', 'faultTime', 'remark', "photo"));
      });
      if (record.id) {
        this.codeDisable = true;
      } else {
        this.codeDisable = false;
      }
    },
    getSysDeparts() {
      getAction(this.url.getSysDeparts).then((res) => {
        if (res.success) {
          this.departs = res.result
        }
      })
    },
    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);
          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();
          })
        }
      })
    },
    onSearchEquipmentList() {
      this.$refs.EquipmentList.list();
      this.$refs.EquipmentList.title = "选择设备信息";
    },
    sendEquipmentRecord(data) {
      let record = data.record;
      this.form.setFieldsValue({ equipmentName: record.name, equipmentId: record.id, equipmentNum: record.num, equipmentModel: record.model, equipmentSpecification: record.specification, useDepartId: record.useId, departName: record.useId_dictText });
    },
  },
}
</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>