EMS_client/src/views/module_cmms/spotcheckContent/modules/SpotcheckContentForm.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="contentcode">
                  <a-input v-model="model.contentcode" placeholder="请输入点检内容编号"  ></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="12">
                <a-form-model-item label="点检内容名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contentname">
                  <a-input v-model="model.contentname" 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="ems_tpm_equipment,equipmentname,id"  />
                </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: 3 }" />
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item label="状态：启用：0、禁用:1" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                  <j-dict-select-tag type="list" v-model="model.status" dictCode="spotcheck_content_status" placeholder="请选择状态：启用：0、禁用:1" />
                </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="handleAddSpotItem" type="link" icon="plus">点检项</a-button>
          </div>
        </div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="model.spotcheckContentItemList"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap">
        </a-table>
        <!-- <cmms-spotcheck-content-modal-add ref="modalForm" @ok="modalFormOk" :modelForm="model" :dataList="model.spotcheckContentItemList" @customEvent="handleCustomEvent"></cmms-spotcheck-content-modal-add> -->
        <spotcheck-content-modal-add  ref="modalForm" @ok="modalFormOk" :modelForm="model" :dataList="model.spotcheckContentItemList" @customEvent="handleCustomEvent"></spotcheck-content-modal-add>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

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

  export default {
    name: 'SpotcheckContentForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
        SpotcheckContentModalAdd
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          spotcheckContentItemList: []
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          contentname: [
            { required: true, message: '请输入点检内容名称!'},
          ],
          equipmentid: [
            { required: true, message: '请选择设备!'},
          ],
        },
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'点检项ID',
            align:"center",
            dataIndex: 'id'
          },
          {
            title:'点检项编号',
            align:"center",
            dataIndex: 'itemcode'
          },
          {
            title:'点检项名称',
            align:"center",
            dataIndex: 'itemname'
          },
          {
            title:'标准',
            align:"center",
            dataIndex: 'conditions',
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          }
        ],
        // dataSource: [],
        loading:false,
        url: {
          list: "/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/{equipmentid}",
          add: "/cmmsSpotcheckContent/cmmsSpotcheckContent/add",
          edit: "/cmmsSpotcheckContent/cmmsSpotcheckContent/edit",
          // queryById: "/cmmsSpotcheckContent/cmmsSpotcheckContent/queryById"
          queryById: "/cmmsSpotcheckContent/cmmsSpotcheckContent/queryContentAndItemById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        // this.edit(this.modelDefault);
        this.model = Object.assign({}, this.modelDefault);
        this.visible = true;
      },
      edit (record) {
        getAction(this.url.queryById, record).then((res) => {
            console.log(88,res)
            this.model = res.result
        })
        // this.model = Object.assign({}, record);
        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
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            console.log(99,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;
            // })
          }

        })
      },
      // 新增点检项
      handleAddSpotItem(){
        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("Received Data:", data);
        this.model.spotcheckContentItemList = data;
      }
    }
  }
</script>

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