EMS_client/src/views/module_cmms/upkeep/modules/UpkeepForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div class="cmms-dialog-item-title">保养工单基本信息</div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="保养工单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upkeepcode">
              <!-- {{model.upkeepcode}} -->
              <a-input v-model="model.upkeepcode" placeholder="请输入保养工单编号" :disabled="true" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planname">
              <!-- {{model.planname}} -->
              <a-input v-model="model.planname" placeholder="请输入计划名称" :disabled="true" ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="保养名称(标题)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upkeepname">
              <a-input v-model="model.upkeepname" placeholder="请输入保养名称(标题)"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="保养计划ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upkeepplanid">
              <a-input v-model="model.upkeepplanid" placeholder="请输入保养计划ID"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="保养工作项目ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upkeepprojid">
              <a-input v-model="model.upkeepprojid" placeholder="请输入保养工作项目ID"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工作项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectname">
              <a-input v-model="model.projectname" placeholder="请输入工作项目名称"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <!-- {{model.address}} -->
              <a-input v-model="model.address" placeholder="请输入地点" :disabled="true" ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="厂商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-input v-model="model.supplier" placeholder="请输入厂商名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="厂商电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="suppliertel">
              <a-input v-model="model.suppliertel" placeholder="请输入厂商电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="linker">
              <a-input v-model="model.linker" placeholder="请输入联系人"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="linkertel">
              <a-input v-model="model.linkertel" placeholder="请输入联系人电话"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeruser">
              <!-- {{model.chargeruser_dictText}} -->
              <j-dict-select-tag v-model="model.chargeruser" placeholder="请选择负责人" dictCode="sys_user,realname,id" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <!-- <a-input v-model="model.status" placeholder="请输入状态：0待处理、1已通知、2未执行、3未完成、4已完成"  ></a-input> -->
              <j-dict-select-tag v-model="model.status" placeholder="请选择状态" dictCode="upkeep_state"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="选择设备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentid">
              <j-search-select-tag v-model="model.equipmentid" dict="tpm_equipment,equipmentname,id"  style="width: 100%" :disabled="true"/>
                <!-- <a-button type="primary" icon="search" /> -->
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="描述" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="upkeepdesc">
              <a-textarea v-model="model.upkeepdesc" placeholder="请输入描述"  :auto-size="{ minRows: 2, maxRows: 2 }"></a-textarea>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="照片" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark">
              <j-image-upload text="上传" v-model="model.files" isMultiple></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="处理意见" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="opinion">
              <a-textarea v-model="model.opinion" placeholder="请输入处理意见"  :auto-size="{ minRows: 2, maxRows: 2 }"></a-textarea>
              <!-- <a-input v-model="model.opinion" placeholder="请输入处理意见"  ></a-input> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark">
              <a-textarea v-model="model.remark" placeholder="请输入备注"  :auto-size="{ minRows: 2, maxRows: 2 }"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
        <div class="cmms-dialog-item-title">设备保养设置</div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="model.cmmsUpkeepItemList"
          :pagination="false"
          class="j-table-force-nowrap">
        </a-table>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'UpkeepForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          cmmsUpkeepItemList: []
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        confirmLoading: false,
        validatorRules: {
          status: [
            { required: true, message: '请选择状态!'},
          ],
          upkeepdesc: [
            { required: true, message: '请输入描述!'},
          ],
          opinion: [
            { required: true, message: '请输入处理意见!'},
          ],
        },
        columns: [
          {
            title:'保养项ID',
            align:"center",
            dataIndex: 'id'
          },
          {
            title:'保养项名称',
            align:"center",
            dataIndex: 'itemname'
          },
          // {
          //   title:'设备类型',
          //   align:"center",
          //   dataIndex: 'equiptypeName'
          // },
          {
            title:'保养项编号',
            align:"center",
            dataIndex: 'itemcode'
          },
          {
            title:'保养项标准',
            align:"center",
            dataIndex: 'itemcontent'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
        url: {
          add: "/cmmsUpkeep/cmmsUpkeep/add",
          edit: "/cmmsUpkeep/cmmsUpkeep/edit",
          queryById: "/cmmsUpkeep/cmmsUpkeep/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        // this.model = Object.assign({}, record);
        getAction(this.url.queryById, record).then((res) => {
            console.log(88,res)
            this.model = res.result
            const b = res.result.files.map((res) => {
              return res.url
            })
            this.model.files = b.join(',')
            // this.model.cmmsUpkeepItemDtoList = this.model.cmmsUpkeepItemDtoList.map((res) => {
            //   return {
            //     id: id,
            //     itemcode: res.itemcode,
            //     itemname: res.itemname,
            //     itemcontent: res.itemcontent,
            //     remark: res.remark
            //   }
            // })
        })
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            if (this.model.files.length != 0) {
              const a  = this.model.files.split(',')
              this.model.files = a.map((res) => {
                return {
                  url: res
                }
              })
            }else{
              this.model.files = []
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>

<style scoped>
@import "~@/assets/less/uStyle.less";
</style>