EMS_client/src/views/module_cmms/upkeepPlan/modules/UpkeepPlanForm.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>
        <div style="height: 100%;width:100%;display: flex;">
          <div style="height: 100%;width:92%;">
            <a-row>
              <!-- <a-col :span="12">
                <a-form-model-item label="保养计划编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="plancode">
                  <a-input v-model="model.plancode" placeholder="请输入保养计划编号"  ></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="12">
                <a-form-model-item label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planname">
                  <a-input v-model="model.planname" placeholder="请输入计划名称"  ></a-input>
                </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" :disabled="disabledEdit" style="width: 100%"/> -->
                  <a-select
                  v-model="model.equipmentid"
                  placeholder="请输入设备名称或设备编号"
                  show-search
                  :disabled="disabledEdit"
                  :filterOption="filterOptions"
                  @search="searchDevice"
                  allowClear>
                    <a-select-option v-for="(item, index) in deviceOptions" :key="index" :value="item.id" :label="item.equipmentname">
                      <span>{{item.equipmentname}}</span>
                      <span style="position: absolute;right: 2%;">{{ item.equipmentcode }}</span>
                    </a-select-option>
                  </a-select>
                    <!-- <a-button type="primary" icon="search" /> -->
                </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="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="plandesc">
                  <a-input v-model="model.plandesc" placeholder="请输入描述"  ></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="12">
                <a-form-model-item label="地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                  <a-input v-model="model.address" placeholder="请输入地点"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargeruser">
                  <j-dict-select-tag v-model="model.chargeruser" placeholder="请选择负责人" dictCode="sys_user,realname,id"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="begintime">
                  <j-date placeholder="请选择开始时间" v-model="model.begintime"  style="width: 100%" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="提前通知" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticenum">
                  <a-input-number v-model="model.noticenum" :min="1" placeholder="请输入提前通知时长" style="width: 40%" />
                  <j-dict-select-tag v-model="model.noticetype" placeholder="时长单位" dictCode="plan_notice_unit" style="width: 30%"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item label="通知单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticetype">
                  <j-dict-select-tag v-model="model.noticetype" placeholder="请选择通知单位" dictCode="plan_notice_unit"/>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="12">
                <a-form-model-item label="重复间隔" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repeatnum">
                  <a-input-number v-model="model.repeatnum" :min="1" placeholder="请输入重复间隔" style="width: 40%" />
                  <j-dict-select-tag v-model="model.repeattype" placeholder="间隔单位" dictCode="plan_cycle_unit" style="width: 30%" />
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item label="间隔单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repeattype">
                  <j-dict-select-tag v-model="model.repeattype" placeholder="请选择间隔单位" dictCode="plan_cycle_unit"/>
                </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停用）"  ></a-input>
                </a-form-model-item>
              </a-col> -->
              <!-- <a-col :span="12">
                <a-form-model-item label="下次执行时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nexttime">
                  <j-date placeholder="请选择下次执行时间" v-model="model.nexttime"  style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="下次通知时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticetime">
                  <j-date placeholder="请选择下次通知时间" v-model="model.noticetime"  style="width: 100%" />
                </a-form-model-item>
              </a-col> -->
              <!-- <a-col :span="12">
                <a-form-model-item label="是否已通知：是/否" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ifnotice">
                  <a-input v-model="model.ifnotice" placeholder="请输入是否已通知：是/否"  ></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="12">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" 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>
          <div style="height: 100%;width:8%;padding-top:0.25%;">
              <a-button type="primary" icon="search" />
          </div>
        </div>
        <div class="cmms-dialog-item-title u-flex-jab">
          <div>设备保养设置</div>
          <div>
            <a-button @click="handleAddUpkeepItem" type="link" icon="plus">保养项</a-button>
          </div>
        </div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="model.cmmsUpkeepItemDtoList"
          :pagination="false"
          class="j-table-force-nowrap">
        </a-table>

        <upkeep-plan-modal-add ref="modalForm" @ok="modalFormOk" :modelForm="model" :dataList="model.cmmsUpkeepItemDtoList" @customEvent="handleCustomEvent"></upkeep-plan-modal-add>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import UpkeepPlanModalAdd from './UpkeepPlanModalAdd.vue'

  export default {
    name: 'UpkeepPlanForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
        UpkeepPlanModalAdd
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          noticetype: '天',
          repeattype: '天',
          cmmsUpkeepItemDtoList: []
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        disabledEdit: false,
        confirmLoading: false,
        validatorRules: {
          planname: [
            { required: true, message: '请输入保养计划名称!'},
          ],
          equipmentid: [
            { required: true, message: '请选择设备!'},
          ],
          address: [
            { required: true, message: '请输入地点!'},
          ],
          chargeruser: [
            { required: true, message: '请输入负责人!'},
          ],
          begintime: [
            { required: true, message: '请选择开始时间!'},
          ],
          noticenum: [
            { required: true, message: '请输入提前通知时长!'},
          ],
          repeatnum: [
            { required: true, message: '请输入重复间隔!'},
          ],
        },
        url: {
          list: "/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/{equipmentid}",
          add: "/cmmsUpkeepPlan/cmmsUpkeepPlan/add",
          edit: "/cmmsUpkeepPlan/cmmsUpkeepPlan/edit",
          queryById: "/cmmsUpkeepPlan/cmmsUpkeepPlan/queryById"
        },
        columns: [
          // {
          //   title:'保养项ID',
          //   align:"center",
          //   dataIndex: 'id'
          // },
          {
            title:'保养项编号',
            align:"center",
            dataIndex: 'itemcode'
          },
          {
            title:'保养项名称',
            align:"center",
            dataIndex: 'itemname'
          },
          // {
          //   title:'设备类型',
          //   align:"center",
          //   dataIndex: 'equiptypeName'
          // },
          {
            title:'保养项标准',
            align:"center",
            dataIndex: 'itemcontent'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
        deviceOptions: [],
        deviceOptionsAll: [],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getDeviceOption();
    },
    methods: {
      // 获取设备下拉列表
      getDeviceOption(){
        getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
          console.log(111,res.result)
          this.deviceOptions = res.result.map((res) => {
            return {
              id: res.id,
              equipmentname: res.equipmentname,
              equipmentcode: res.equipmentcode,
            }
          })
          // 存一个完整的设备表
          this.deviceOptionsAll = this.deviceOptions
          console.log(7878,this.deviceOptionsAll)
        })
      },
      // 筛选设备
      searchDevice(value) {
        console.log(1212,value,value.trim().length)
        // 若输入的值删除，则重新赋完整的设备列表
        if (value.trim().length === 0) {
          this.deviceOptions = this.deviceOptionsAll
        }
        // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
        let panDuan = isNaN(parseFloat(value))
        if (!panDuan) {
          // 数字
          console.log(777)
          let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
          this.deviceOptions = filteredArray
        } else {
          console.log(888)
          let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
          this.deviceOptions = filteredArray
        }
        console.log(999,this.deviceOptions)
      },
      // 解决筛选后option不回显问题
      filterOptions(input, option) {                    
        return this.deviceOptions
      },
      add () {
        // this.edit(this.modelDefault);
        this.model = Object.assign({}, this.modelDefault);
        this.visible = true;
      },
      edit (record) {
        // this.model = Object.assign({}, record);
        this.disabledEdit = true
        getAction(this.url.queryById, record).then((res) => {
            console.log(88,res)
            this.model = res.result
            // 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';
              // 默认状态是禁用
              this.model.status = 1
              this.model.cmmsUpkeepItemDtoList = this.model.cmmsUpkeepItemDtoList.map((res) => {
                return {
                  id: res.id
                }
              })
            }else{
              httpurl+=this.url.edit;
               method = 'put';
               this.model.cmmsUpkeepItemDtoList = this.model.cmmsUpkeepItemDtoList.map((res) => {
                return {
                  id: res.id
                }
              })
            }
            console.log(999,this.model)
            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;
            })
          }
         
        })
      },
      // 通过已选设备获取保养项列表
      handleAddUpkeepItem(){
        console.log(this.model.equipmentid)
        if (this.model.equipmentid == undefined) {
          this.$message.error("请先选择设备！");
        } else {
          this.$refs.modalForm.add();
          this.$refs.modalForm.title = "选择保养项";
        }
      },
      // 处理子组件传过来的数据
      handleCustomEvent(data) {
        // 处理从子组件传递过来的数据
        console.log("子组件传过来的数据:", data);
        this.model.cmmsUpkeepItemDtoList = data;
      }
    }
  }
</script>

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