操作证管理功能 前端界面增加操作证明细

zenglf

2023-10-18 0eaf97f0ae448f4376e89a8544efb54a930eb643

操作证管理功能 前端界面增加操作证明细

 src/views/eam/OperationCertificateList.vue

@@ -44,8 +44,8 @@

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class='table-operator'>
      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>
<!--      <a-button @click='handleChangeCertificate' type='primary' icon='plus'>变更操作证</a-button>-->
<!--      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>-->
      <a-button @click='handleChangeCertificate' type='primary' icon='plus'>变更操作证</a-button>
      <a-button type='primary' icon='download' @click="handleExportXls('操作证书管理')">导出</a-button>
      <a-upload name='file' :showUploadList='false' :multiple='false' :headers='tokenHeader' :action='importExcelUrl'
                @change='handleImportExcel'>
@@ -80,8 +80,11 @@
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,type:'radio'}"
        :customRow='clickThenSelect'
        @change='handleTableChange'>



        <template slot='htmlSlot' slot-scope='text'>
          <div v-html='text'></div>
@@ -106,8 +109,8 @@

        <span slot='action' slot-scope='text, record'>
<!--          <a @click='handleEdit(record)'>编辑</a>-->
<!--          <a-divider type='vertical' />-->
          <a @click='handleDetail(record)'>详情</a>
          <!--          <a-divider type='vertical' />-->
<!--          <a @click='handleDetail(record)'>详情</a>-->
          <!--          <a-divider type="vertical" />-->
          <!--          <a-dropdown>-->
          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
@@ -126,7 +129,11 @@

      </a-table>
    </div>

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="操作证管理明细" key="1" >
        <OperationCertificateDetailList :mainId="operationCertificateDetailMainId" />
      </a-tab-pane>
    </a-tabs>
    <operation-certificate-modal ref='modalForm' @ok='modalFormOk' />
  </a-card>
</template>
@@ -135,14 +142,16 @@

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import OperationCertificateModal from './modules/operationCertificate/OperationCertificateModal'
import OperationCertificateDetailList from './modules/operationCertificate/OperationCertificateDetailList'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import '@/assets/less/TableExpand.less'

import { getAction } from '@/api/manage'
export default {
  name: 'OperationCertificateList',
  mixins: [JeecgListMixin],
  components: {
    OperationCertificateModal
    OperationCertificateModal,
    OperationCertificateDetailList
  },
  data() {
    return {
@@ -213,14 +222,14 @@
          align: 'center',
          dataIndex: 'status_dictText'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 147,
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      url: {
        list: '/eam/operationCertificate/list',
@@ -231,7 +240,22 @@

      },
      dictOptions: {},
      superFieldList: []
      superFieldList: [],
      /* åˆ†é¡µå‚æ•° */
      ipagination:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " å…±" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      selectedMainId:'',

      operationCertificateDetailMainId: '',
    }
  },
  created() {
@@ -245,13 +269,61 @@
  methods: {
    initDictConfig() {
    },

    // handleChangeCertificate: function (record) {
    //   this.$refs.modalForm.edit(record)
    //   this.$refs.modalForm.title = '变更操作证'
    //   this.$refs.modalForm.disableSubmit = false
    //   // this.$refs.modalForm.isRevise = false;
    // },
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(","), [record]);
          }
        }
      }
    },
    handleChangeCertificate: function() {
      if (this.selectionRows.length <= 0) {
        this.$message.warning('请选择一条记录')
        return
      }
      const record = this.selectionRows[0]
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '变更操作证'
      this.$refs.modalForm.disableSubmit = false
      this.$refs.modalForm.loadSubTableDataFlag = false
      // this.$refs.modalForm.isRevise = false;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedMainId=''
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId=selectedRowKeys[0]
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      this.operationCertificateDetailMainId = selectionRows[0]['id']
    },
    loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.onClearSelected()
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'num', text: '操作证编号', dictCode: '' })

 src/views/eam/modules/operationCertificate/OperationCertificateDetailList.vue

@@ -1,241 +1,207 @@
<template>
  <a-card
    :bordered='false'
    :class="'cust-erp-sub-tab'"
  >
  <a-card :bordered="false" :class="'cust-erp-sub-tab'">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class='table-page-search-wrapper'>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator" v-if="mainId">
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('操作证管理明细')">导出</a-button>-->
<!--      <a-upload-->
<!--        name="file"-->
<!--        :showUploadList="false"-->
<!--        :multiple="false"-->
<!--        :headers="tokenHeader"-->
<!--        :action="importExcelUrl"-->
<!--        @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--        <a-menu slot="overlay">-->
<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
<!--        </a-menu>-->
<!--        <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ <a-icon type="down" /></a-button>-->
<!--      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> å·²é€‰æ‹© <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref='table'
        size='middle'
        ref="table"
        size="middle"
        bordered
        rowKey='id'
        :scroll="{ x: 'calc(1400px + 50%)', y: 900 }"
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        @change='handleTableChange'
      >
        rowKey="id"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template
          slot='htmlSlot'
          slot-scope='text'
        >
          <div v-html='text'></div>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template
          slot='imgSlot'
          slot-scope='text,record'
        >
          <span
            v-if='!text'
            style='font-size: 12px;font-style: italic;'
          >无图片</span>
          <img
            v-else
            :src='getImgView(text)'
            :preview='record.id'
            height='25px'
            alt=''
            style='max-width:80px;font-size: 12px;font-style: italic;'
          />
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template
          slot='takingInfo'
          slot-scope='text'
        >
          <span
            v-if='!text'
            style='font-size: 12px;font-style: italic;color: #126ee7;'
          >/</span>
          <span
            v-if='text'
            style='font-size: 12px;font-style: italic;'
          >{{ text }}</span>
        </template>
        <template
          slot='fileSlot'
          slot-scope='text'
        >
          <span
            v-if='!text'
            style='font-size: 12px;font-style: italic;'
          >无文件</span>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost='true'
            type='primary'
            icon='download'
            size='small'
            @click='downloadFile(text)'
          >
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            ä¸‹è½½
          </a-button>
        </template>

        <span
          slot='action'
          slot-scope='text, record'
        >
          <a @click='handleEdit(record)'>编辑</a>
          <a-divider type='vertical' />

          <a-popconfirm
            title='确定删除吗?'
            @confirm='() => handleDelete(record.id)'
          >
            <a v-if="record.uda1 == '不通过'">删除</a>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>

        </span>

        <span
          slot="examinationConclusion"
          slot-scope="text, record"
        >


          <a
            v-if="record.examinationConclusion === 'N' "
          >不合格</a>
          <span v-else>合格</span>
        </span>

      </a-table>
    </div>

    <operationCertificateDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></operationCertificateDetail-modal>
  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@api/manage'
import OperationCertificateDetailModal from './OperationCertificateDetailModal'

export default {
  name: 'OperationCertificateDetailList',
  mixins: [JeecgListMixin],

  props: {
    mainId: {
      type: String,
      default: '',
      required: false
  name: "OperationCertificateDetailList",
  mixins:[JeecgListMixin],
  components: { OperationCertificateDetailModal },
  props:{
    mainId:{
      type:String,
      default:'',
      required:false
    }
  },
  watch: {
    mainId: {
  watch:{
    mainId:{
      immediate: true,
      handler(val) {
        if (!this.mainId) {
        if(!this.mainId){
          this.clearList()
        } else {
          this.queryParam['id'] = val
          this.loadData(1)
        }else{
          this.queryParam['operationCertificateId'] = val
          this.loadData(1);
        }
      }
    }
  },
  data() {
  data () {
    return {
      description: '操作证管理明细页面',
      disableMixinCreated: true,
      description: '操作证书管理管理页面',
      disableMixinCreated:true,
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        // {
        //   title:'证书ID',
        //   align:"center",
        //   dataIndex: 'operationCertificateId'
        // },
        {
          title:'发生时间',
          align:"center",
          dataIndex: 'happenDate',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title: '扣分设备',
          align: 'center',
          dataIndex: 'equipmentNames',

          title:'类型',
          align:"center",
          dataIndex: 'type_dictText'
        },
        {
          title: '扣分项',
          align: 'center',
          dataIndex: 'appointmentCardNum',

          title:'设备统一编码',
          align:"center",
          dataIndex: 'equipmentId_dictText'
        },
        {
          title: '扣除分数',
          align: 'center',
          dataIndex: 'replaceReason',

          title:'扣分项',
          align:"center",
          dataIndex: 'deductionItem_dictText'
        },
        {
          title: '扣分周期',
          align: 'center',
          dataIndex: 'theoreticalResults',

        }
        // {
        //   title:'扣分周期',
        //   align:"center",
        //   dataIndex: 'period'
        // },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align:"center",
        //   fixed:"right",
        //   width:147,
        //   scopedSlots: { customRender: 'action' },
        // }
      ],
      url: {
        list: '/eam/operationCertificate/queryOperationCertificateDetailByMainId'
        list: "/eam/operationCertificate/listOperationCertificateDetailByMainId",
        delete: "/eam/operationCertificate/deleteOperationCertificateDetail",
        deleteBatch: "/eam/operationCertificate/deleteBatchOperationCertificateDetail",
        exportXlsUrl: "/eam/operationCertificate/exportOperationCertificateDetail",
        importUrl: "/eam/operationCertificate/importOperationCertificateDetail",
      },
      dictOptions: {
        type: [],
        inventoryStatus: []
      dictOptions:{
        equipmentIds:[],
        status:[],
      }
    }
  },
  created() {
  },
  computed: {
    importExcelUrl() {
      return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`
    importExcelUrl(){
      return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`;
    }
  },
  methods: {
    clearList() {
      this.dataSource = []
      this.selectedRowKeys = []
    clearList(){
      this.dataSource=[]
      this.selectedRowKeys=[]
      this.ipagination.current = 1
    },

    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/common.less'
</style>

 src/views/eam/modules/operationCertificate/OperationCertificateDetailModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,148 @@
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="证书ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operationCertificateId">
              <a-input v-model="model.operationCertificateId"placeholder="请输入证书ID" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发生时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="happenDate">
              <j-date placeholder="请选择发生时间" v-model="model.happenDate" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <a-input v-model="model.type"placeholder="请输入类型" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="设备id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
              <a-input v-model="model.equipmentId"placeholder="请输入设备id" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="扣分项" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductionItem">
              <a-input v-model="model.deductionItem"placeholder="请输入扣分项" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="扣分周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="period">
              <a-input v-model="model.period"placeholder="请输入扣分周期" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>

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

  export default {
    name: "OperationCertificateDetailModal",
    components: {
    },
    props:{
      mainId:{
        type:String,
        required:false,
        default:''
      }
    },
    data () {
      return {
        title:"操作",
        width:800,
        visible: false,
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/eam/operationCertificate/addOperationCertificateDetail",
          edit: "/eam/operationCertificate/editOperationCertificateDetail",
        }

      }
    },
    created () {
    //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate();
      },
      handleOk () {
        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';
            }
            this.model['operationCertificateId'] = this.mainId
            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;
              that.close();
            })
          }else{
             return false
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

 src/views/eam/modules/operationCertificate/OperationCertificateForm.vue

@@ -1,73 +1,76 @@
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
  <a-spin :spinning='confirmLoading'>
    <j-form-container :disabled='formDisabled'>
      <!-- ä¸»è¡¨å•åŒºåŸŸ -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      <a-form-model ref='form' :model='model' :rules='validatorRules' slot='detail'>
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="操作证编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
              <a-input v-model="model.num" placeholder="请输入操作证编号" ></a-input>
          <a-col :span='12'>
            <a-form-model-item label='操作证编号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='num'>
              <a-input v-model='model.num' placeholder='请输入操作证编号'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userId">
              <j-select-user-by-dep v-model="model.userId" :multi="false" />
          <a-col :span='12'>
            <a-form-model-item label='姓名' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='userId'>
              <j-select-user-by-dep v-model='model.userId' :multi='false' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="发证日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issueDate">
              <j-date placeholder="请选择发证日期" v-model="model.issueDate" style="width: 100%" />
          <a-col :span='12'>
            <a-form-model-item label='发证日期' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='issueDate'>
              <j-date placeholder='请选择发证日期' v-model='model.issueDate' style='width: 100%' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
              <j-date placeholder="请选择开始时间" v-model="model.startTime" style="width: 100%" />
          <a-col :span='12'>
            <a-form-model-item label='开始时间' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='startTime'>
              <j-date placeholder='请选择开始时间' v-model='model.startTime' style='width: 100%' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
              <j-date placeholder="请选择结束时间" v-model="model.endTime" style="width: 100%" />
          <a-col :span='12'>
            <a-form-model-item label='结束时间' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='endTime'>
              <j-date placeholder='请选择结束时间' v-model='model.endTime' style='width: 100%' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="当前周期分数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentCycleScore">
              <a-input-number v-model="model.currentCycleScore" placeholder="请输入当前周期分数" style="width: 100%" />
          <a-col :span='12'>
            <a-form-model-item label='当前周期分数' :labelCol='labelCol' :wrapperCol='wrapperCol'
                               prop='currentCycleScore'>
              <a-input-number v-model='model.currentCycleScore' placeholder='请输入当前周期分数' style='width: 100%' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="设备统一编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentIds">
              <j-multi-select-tag type="list_multi" v-model="model.equipmentIds" dictCode="mom_eam_equipment,num,id" placeholder="请选择设备统一编码" />
          <a-col :span='12'>
            <a-form-model-item label='设备统一编码' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='equipmentIds'>
              <j-multi-select-tag type='list_multi' v-model='model.equipmentIds' dictCode='mom_eam_equipment,num,id'
                                  placeholder='请选择设备统一编码' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="certificate_status" placeholder="请选择状态" disabled/>
          <a-col :span='12'>
            <a-form-model-item label='状态' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='status'>
              <j-dict-select-tag type='list' v-model='model.status' dictCode='certificate_status'
                                 placeholder='请选择状态' disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" placeholder="请输入备注" ></a-textarea>
          <a-col :span='24'>
            <a-form-model-item label='备注' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='remark'>
              <a-textarea v-model='model.remark' placeholder='请输入备注'></a-textarea>
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </j-form-container>
      <!-- å­è¡¨å•åŒºåŸŸ -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="操作证管理明细" :key="refKeys[0]" :forceRender="true">
    <!-- å­è¡¨å•åŒºåŸŸ -->
    <a-tabs v-model='activeKey' @change='handleChangeTabs'>
      <a-tab-pane tab='操作证管理明细' :key='refKeys[0]' :forceRender='true'>
        <j-vxe-table
          keep-source
          :ref="refKeys[0]"
          :loading="operationCertificateDetailTable.loading"
          :columns="operationCertificateDetailTable.columns"
          :dataSource="operationCertificateDetailTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"
          />
          :ref='refKeys[0]'
          :loading='operationCertificateDetailTable.loading'
          :columns='operationCertificateDetailTable.columns'
          :dataSource='operationCertificateDetailTable.dataSource'
          :maxHeight='300'
          :disabled='formDisabled'
          :rowNumber='true'
          :rowSelection='true'
          :toolbar='true'
        />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
@@ -75,177 +78,188 @@

<script>

  import { getAction } from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

  export default {
    name: 'OperationCertificateForm',
    mixins: [JVxeTableModelMixin],
    components: {
      JFormContainer,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        model:{
         },
        // æ–°å¢žæ—¶å­è¡¨é»˜è®¤æ·»åŠ å‡ è¡Œç©ºæ•°æ®
        addDefaultRowNum: 1,
        validatorRules: {
           num: [
              { required: true, message: '请输入操作证编号!'},
           ],
           currentCycleScore: [
              { required: true, message: '请输入当前周期分数!'},
              { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!'},
           ],
        },
        refKeys: ['operationCertificateDetail', ],
        tableKeys:['operationCertificateDetail', ],
        activeKey: 'operationCertificateDetail',
        // æ“ä½œè¯ç®¡ç†æ˜Žç»†
        operationCertificateDetailTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '证书ID',
              key: 'operationCertificateId',
               type: JVXETypes.hidden,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            {
              title: '日期',
              key: 'happenDate',
              type: JVXETypes.date,
              width:"120px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            {
              title: '类型',
              key: 'type',
               type: JVXETypes.select,
              dictCode: 'certificate_change_type',
              width:"100px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            {
              title: '设备统一编码',
              key: 'equipmentId',
              type: JVXETypes.selectSearch,
              dictCode: 'mom_eam_equipment,num,id ',
              width: '200px',
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            {
              title: '扣分项',
              key: 'deductionItem',
              type: JVXETypes.selectSearch,
              dictCode: 'mom_eam_base_deduction_item,content,id ',
              width:"500px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            {
              title: '扣分周期',
              key: 'period',
               type: JVXETypes.normal,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
          ]
        },
        url: {
          add: "/eam/operationCertificate/add",
          edit: "/eam/operationCertificate/edit",
          queryById: "/eam/operationCertificate/queryById",
          operationCertificateDetail: {
            list: '/eam/operationCertificate/queryOperationCertificateDetailByMainId'
export default {
  name: 'OperationCertificateForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      model: {},
      // æ–°å¢žæ—¶å­è¡¨é»˜è®¤æ·»åŠ å‡ è¡Œç©ºæ•°æ®
      addDefaultRowNum: 1,

      validatorRules: {
        num: [
          { required: true, message: '请输入操作证编号!' }
        ],
        currentCycleScore: [
          { required: true, message: '请输入当前周期分数!' },
          { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
        ]
      },
      refKeys: ['operationCertificateDetail'],
      tableKeys: ['operationCertificateDetail'],
      activeKey: 'operationCertificateDetail',
      // æ“ä½œè¯ç®¡ç†æ˜Žç»†
      operationCertificateDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '证书ID',
            key: 'operationCertificateId',
            type: JVXETypes.hidden,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '日期',
            key: 'happenDate',
            type: JVXETypes.date,
            width: '120px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '类型',
            key: 'type',
            type: JVXETypes.select,
            dictCode: 'certificate_change_type',
            width: '100px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '设备统一编码',
            key: 'equipmentId',
            type: JVXETypes.selectSearch,
            dictCode: 'mom_eam_equipment,num,id ',
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '扣分项',
            key: 'deductionItem',
            type: JVXETypes.selectSearch,
            dictCode: 'mom_eam_base_deduction_item,content,id ',
            width: '500px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          // {
          //   title: '扣分周期',
          //   key: 'period',
          //   type: JVXETypes.normal,
          //   width: '200px',
          //   placeholder: '请输入${title}',
          //   defaultValue: ''
          // }
        ]
      },
      url: {
        add: '/eam/operationCertificate/add',
        edit: '/eam/operationCertificate/edit',
        queryById: '/eam/operationCertificate/queryById',
        operationCertificateDetail: {
          list: '/eam/operationCertificate/queryOperationCertificateDetailByMainId'
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
      addBefore(){
        this.operationCertificateDetailTable.dataSource=[]
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** è°ƒç”¨å®Œedit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
        })
        // åŠ è½½å­è¡¨æ•°æ®
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.operationCertificateDetail.list, params, this.operationCertificateDetailTable)
        }
      },
      //校验所有一对一子表表单
        validateSubForm(allValues){
            return new Promise((resolve,reject)=>{
              Promise.all([
              ]).then(() => {
                resolve(allValues)
              }).catch(e => {
                if (e.error === VALIDATE_FAILED) {
                  // å¦‚果有未通过表单验证的子表，就自动跳转到它所在的tab
                  this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
                } else {
                  console.error(e)
                }
              })
            })
        },
      /** æ•´ç†æˆformData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // å±•å¼€
          operationCertificateDetailList: allValues.tablesValue[0].tableData,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },

    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    //子表加载
    loadSubTableData: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    loadSubTableDataMode() {
      return this.loadSubTableData
    }
  },
  created() {
  },
  methods: {
    addBefore() {
      this.operationCertificateDetailTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** è°ƒç”¨å®Œedit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      console.log( "this.loadSubTableDataMode:"+this.loadSubTableDataMode)
      // åŠ è½½å­è¡¨æ•°æ®
      if (this.model.id && this.loadSubTableDataMode) {
        let params = { id: this.model.id }
        // åŠ è½½å­è¡¨æ•°æ®
        this.requestSubTableData(this.url.operationCertificateDetail.list, params, this.operationCertificateDetailTable)
      }

    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_FAILED) {
            // å¦‚果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** æ•´ç†æˆformData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // å±•å¼€
        operationCertificateDetailList: allValues.tablesValue[0].tableData
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    }

  }
}
</script>

<style scoped>

 src/views/eam/modules/operationCertificate/OperationCertificateModal.vue

@@ -1,63 +1,64 @@
<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :title='title'
    :width='1200'
    :visible='visible'
    :maskClosable='false'
    switchFullscreen
    @ok="handleOk"
    @ok='handleOk'
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel">
    <operation-certificate-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"/>
    @cancel='handleCancel'>
    <operation-certificate-form ref='realForm' @ok='submitCallback' :disabled='disableSubmit'  :loadSubTableData='loadSubTableDataFlag' />
  </j-modal>
</template>

<script>

  import OperationCertificateForm from './OperationCertificateForm'
import OperationCertificateForm from './OperationCertificateForm'

  export default {
    name: 'OperationCertificateModal',
    components: {
      OperationCertificateForm
export default {
  name: 'OperationCertificateModal',
  components: {
    OperationCertificateForm
  },
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      loadSubTableDataFlag: true
    }
  },
  methods: {
    add() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.add()
      })
    },
    data() {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false
      }
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.edit(record)
      })
    },
    methods:{
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
      },
      edit (record) {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.edit(record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.handleOk();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$refs.realForm.handleOk()
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>