1、调整设备利用率等报表页面样式 2、新增MDC设备实施台账页面及功能

zhaowei

2024-11-27 5edf2b3a4b820c3540a23ae4d700a53f5c71d73f

1、调整设备利用率等报表页面样式
2、新增MDC设备实施台账页面及功能

 src/mixins/JeecgListMixin.js

@@ -131,7 +131,7 @@
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
      param.field = this.getQueryField();
      if(this.columns) param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      //获取用户定制的参数属性

 src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue

@@ -156,7 +156,7 @@
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备型号
                <th class="thgu dong7 name" rowspan="2" style="min-width: 120px; max-width: 120px;width: 120px;">设备型号
                </th>
                <!--<th rowspan="2">组别</th>-->
                <template v-for="(tableHead, index) in tableHeads">
@@ -200,11 +200,11 @@
                    {{item.equipmentName}}
                  </td>
                  <td class="tdgu5 kaitou">{{item.equipmentType}}</td>
                  <td class="tdgu5 kaitou">{{item.equipmentModel}}</td>
                  <td class="tdgu6 kaitou">{{item.equipmentModel}}</td>
                </template>

                <template v-else>
                  <td colspan="6" class="tdgu kaitou">{{item.level1}}</td>
                  <td colspan="7" class="tdgu kaitou">{{item.level1}}</td>
                </template>
                <template v-for="(tableHead, index) in item.dataList">
                  <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1">
@@ -690,6 +690,12 @@
    z-index: 2;
  }

  .table tbody tr .tdgu6 {
    position: sticky;
    left: 512px;
    z-index: 2;
  }

  .table2 thead tr .timeth,
  .table2 thead tr .thgu {
    position: sticky;
@@ -737,6 +743,11 @@
    left: 412px;
  }

  .table2 thead .equipname .dong7 {
    z-index: 5;
    left: 512px;
  }

  #EfficiencyPO {
    overflow: hidden;
  }

 src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue

@@ -144,7 +144,7 @@
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备型号
                <th class="thgu dong7 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备型号
                </th>
                <!--<th rowspan="2">组别</th>-->
                <template v-for="(tableHead, index) in tableHeads">
@@ -190,7 +190,7 @@
                    {{item.equipmentName}}
                  </td>
                  <td class="tdgu5 kaitou">{{item.equipmentType}}</td>
                  <td class="tdgu5 kaitou">{{item.equipmentModel}}</td>
                  <td class="tdgu6 kaitou">{{item.equipmentModel}}</td>
                </template>

                <!--合计与平均值区域-->
@@ -698,6 +698,12 @@
    z-index: 2;
  }

  .table tbody tr .tdgu6 {
    position: sticky;
    left: 512px;
    z-index: 2;
  }

  .table2 thead tr .timeth,
  .table2 thead tr .thgu {
    position: sticky;
@@ -745,6 +751,11 @@
    left: 412px;
  }

  .table2 thead .equipname .dong7 {
    z-index: 5;
    left: 512px;
  }

  #Efficiency {
    overflow: hidden;
  }

 src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue

@@ -177,9 +177,9 @@
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型
                </th>
                <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备型号
                <th class="thgu dong7 name" rowspan="2" style="min-width: 120px; max-width: 120px;width: 120px;">设备型号
                </th>
                <th class="thgu dong7 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">班次</th>
                <th class="thgu dong8 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">班次</th>
                <template v-for="(tableHead, index) in tableHeads">
                  <th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>
                </template>
@@ -221,12 +221,12 @@
                    {{item.equipmentName}}
                  </td>
                  <td class="tdgu5  kaitou">{{item.equipmentType}}</td>
                  <td class="tdgu5 kaitou">{{item.equipmentModel}}</td>
                  <td class="tdgu6  kaitou">{{item.shiftSubName}}</td>
                  <td class="tdgu6 kaitou">{{item.equipmentModel}}</td>
                  <td class="tdgu7  kaitou">{{item.shiftSubName}}</td>
                </template>

                <template v-else>
                  <td colspan="7" class="tdgu kaitou">{{item.level1}}</td>
                  <td colspan="8" class="tdgu kaitou">{{item.level1}}</td>
                </template>
                <!--<td>{{item.tierType}}</td>-->
                <template v-for="(tableHead, index) in item.dataList">
@@ -748,6 +748,12 @@
    z-index: 2;
  }

  .table tbody tr .tdgu7 {
    position: sticky;
    left: 632px;
    z-index: 2;
  }

  .table2 thead tr .timeth,
  .table2 thead tr .thgu {
    position: sticky;
@@ -800,6 +806,12 @@
    left: 512px;
  }

  .table2 thead .equipname .dong8 {
    z-index: 6;
    left: 632px;
  }


  #EfficiencyShift {
    overflow: hidden;
  }

 src/views/system/MdcEquipmentImplementLedger.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,418 @@
<template>
  <a-card :bordered="false">
    <div :bordered="false" style="height: 100%">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="5" :sm="5">
              <a-form-item label="设备编号">
                <a-input v-model="queryParam.equipmentId" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="设备名称">
                <a-input v-model="queryParam.equipmentName" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="5" :md="5" :sm="5" :xs="5">
              <a-space>
                <a-button type="primary" @click="loadData" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸÂ· -->
      <div class="table-operator" style="border-top: 5px">
        <a-button @click="handleAdd" type="primary" icon="plus">添加台账</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">
              <a-icon type="delete" @click="batchDel"/>
              åˆ é™¤
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            æ‰¹é‡æ“ä½œ
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>

      <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{x:'max-content'}"
               :expandRowByClick="true"
               rowKey="id" @expand="handleExpandChange" :loading="outerDataLoading"
      >
        <span slot="isMdcInstall" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
        <span slot="isMdcHardwareInstall" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
        <span slot="isDncInstall" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
        <span slot="isDncHardwareInstall" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
        <span slot="action" slot-scope="text, record">
          <a @click.stop="handleAdd(record.id,'sub_')">新增记录</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              æ›´å¤š <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
               <a @click="handleEdit(record)">编辑台账</a>
              </a-menu-item>

              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">台账详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除此台账吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除台账</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

        <a-table
          slot="expandedRowRender"
          slot-scope="row"
          :columns="innerColumns"
          :data-source="row.innerDataList"
          :pagination="false"
          rowKey="id"
          :loading="innerDataLoading"
        >
          <span slot="mdcFunctionStatus" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
          <span slot="mdcModuleStatus" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
          <span slot="dncFunctionStatus" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
          <span slot="dncModuleStatus" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
          <span slot="maintenanceResult" slot-scope="text">{{text | formatIsInstallAndStatus}}</span>
          <span slot="innerAction" slot-scope="text, record">
            <a @click="handleEdit(record,'sub_')">编辑记录</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              æ›´å¤š <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record,'sub_')">记录详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除此变更记录吗?" @confirm="() => handleDelete(record.id,'sub')">
                  <a>删除记录</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        </a-table>
      </a-table>
    </div>

    <MdcImplementLedgersModal ref="modalForm" @ok="loadData"/>
    <MdcImplementLedgersSubModal ref="sub_modalForm" @ok="loadData"/>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { putAction, getAction } from '@/api/manage'
  import MdcImplementLedgersModal from './modules/MdcEquipmentImplementLedger/MdcImplementLedgersModal'
  import MdcImplementLedgersSubModal from './modules/MdcEquipmentImplementLedger/MdcImplementLedgersSubModal'
  import { deleteAction } from '@/api/manage'

  const columns = [
    { title: '公司', dataIndex: 'companyName', key: 'companyName', align: 'center', width: 100 },
    { title: '车间', dataIndex: 'productionName', key: 'productionName', align: 'center', width: 100 },
    { title: '工段', dataIndex: 'sectionName', key: 'sectionName', align: 'center', width: 100 },
    { title: '设备编号', dataIndex: 'equipmentId', key: 'equipmentId', align: 'center', width: 100 },
    { title: '设备名称', dataIndex: 'equipmentName', key: 'equipmentName', align: 'center', width: 100 },
    { title: '设备型号', dataIndex: 'equipmentModel', key: 'equipmentModel', align: 'center', width: 100 },
    { title: '设备系统类型', dataIndex: 'controlSystem', key: 'controlSystem', align: 'center', width: 150 },
    { title: '设备责任人', dataIndex: 'responsible', key: 'responsible', align: 'center', width: 150 },
    { title: '设备安放位置', dataIndex: 'equipmentPosition', key: 'equipmentPosition', align: 'center', width: 150 },
    { title: '设备安放时间', dataIndex: 'placementTime', key: 'placementTime', align: 'center', width: 150 },
    {
      title: 'MDC安装情况',
      dataIndex: 'isMdcInstall',
      key: 'isMdcInstall',
      align: 'center',
      width: 150,
      scopedSlots: { customRender: 'isMdcInstall' }
    },
    {
      title: 'MDC硬件安装',
      dataIndex: 'isMdcHardwareInstall',
      key: 'isMdcHardwareInstall',
      align: 'center',
      width: 150,
      scopedSlots: { customRender: 'isMdcHardwareInstall' }
    },
    { title: '安装时间', dataIndex: 'mdcInstallTime', key: 'mdcInstallTime', align: 'center', width: 150 },
    {
      title: 'DNC安装情况',
      dataIndex: 'isDncInstall',
      key: 'isDncInstall',
      align: 'center',
      width: 150,
      scopedSlots: { customRender: 'isDncInstall' }
    },
    {
      title: 'DNC硬件安装',
      dataIndex: 'isDncHardwareInstall',
      key: 'isDncHardwareInstall',
      align: 'center',
      width: 150,
      scopedSlots: { customRender: 'isDncHardwareInstall' }
    },
    { title: '安装时间', dataIndex: 'dncInstallTime', key: 'dncInstallTime', align: 'center', width: 150 },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 200
    }
  ]

  const innerColumns = [
    {
      title: '变更记录',
      dataIndex: 'rowIndex',
      key: 'rowIndex',
      align: 'center',
      customRender: function(t, r, index) {
        return parseInt(index) + 1
      }
    },
    { title: '变更时间', dataIndex: 'alterTime', key: 'alterTime', align: 'center' },
    { title: '变更原因', dataIndex: 'alterReason', key: 'alterReason', align: 'center ' },
    { title: '设备位置确认', dataIndex: 'locationStatus', key: 'locationStatus', align: 'center' },
    { title: '设备网络确认', dataIndex: 'networkStatus', key: 'networkStatus', align: 'center' },
    {
      title: 'MDC功能确认',
      dataIndex: 'mdcFunctionStatus',
      key: 'mdcFunctionStatus',
      scopedSlots: { customRender: 'mdcFunctionStatus' },
      align: 'center'
    },
    {
      title: 'MDC模块确认',
      dataIndex: 'mdcModuleStatus',
      key: 'mdcModuleStatus',
      scopedSlots: { customRender: 'mdcModuleStatus' },
      align: 'center'
    },
    {
      title: 'DNC功能确认',
      dataIndex: 'dncFunctionStatus',
      key: 'dncFunctionStatus',
      scopedSlots: { customRender: 'dncFunctionStatus' },
      align: 'center'
    },
    {
      title: 'DNC模块确认',
      dataIndex: 'dncModuleStatus',
      key: 'dncModuleStatus',
      scopedSlots: { customRender: 'dncModuleStatus' },
      align: 'center'
    },
    { title: '反馈人', dataIndex: 'feedbackBy', key: 'feedbackBy', align: 'center' },
    { title: '反馈时间', dataIndex: 'feedbackTime', key: 'feedbackTime', align: 'center' },
    { title: '维护人员', dataIndex: 'maintenanceBy', key: 'maintenanceBy', align: 'center' },
    { title: '处理时间', dataIndex: 'maintenanceTime', key: 'maintenanceTime', align: 'center' },
    { title: '处理过程描述', dataIndex: 'maintenanceRemark', key: 'maintenanceRemark', align: 'center' },
    {
      title: '处理结果',
      dataIndex: 'maintenanceResult',
      key: 'maintenanceResult',
      scopedSlots: { customRender: 'maintenanceResult' },
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'innerAction',
      scopedSlots: { customRender: 'innerAction' },
      align: 'center',
      width: 200
    }
  ]

  export default {
    name: 'MdcEquipmentImplementLedger',
    components: { MdcImplementLedgersModal, MdcImplementLedgersSubModal },
    mixins: [JeecgListMixin],
    data() {
      return {
        // ç¦ç”¨mixins中的create钩子
        disableMixinCreated: true,
        /* table加载状态 */
        outerDataLoading: false,
        innerDataLoading: false,
        queryParam: {},
        dataList: [],
        url: {
          mdcImplementLedgersList: '/mdc/mdcImplementLedgers/list',
          mdcImplementLedgersSubList: '/mdc/mdcImplementLedgersSub/list'
        },
        columns,
        innerColumns,
        hasRequestAlarmCodeList: []
      }
    },
    /**
     * ç”Ÿå‘½å‘¨æœŸ æŒ‚载前
     * */
    created() {
      this.loadData()
    },
    filters: {
      numFilter(value) {
        if (value) {
          return parseFloat((value * 100).toFixed(2))
        } else {
          return '0'
        }
      },

      formatIsInstallAndStatus(value) {
        return value === 'Y' ? '是' : '否'
      },

      /**
       * æ ¼å¼åŒ–时间
       * @param seconds ç§’æ•°
       * @returns '' æ ¼å¼åŒ–后时间字符串
       */
      getFormattedTime(seconds) {
        var hours = Math.floor(seconds / 3600)
        var minutes = Math.floor((seconds % 3600) / 60)
        var secs = seconds % 60

        if (hours === 0) {
          if (minutes === 0) {
            return secs === 0 ? 0 : `${secs}秒`
          } else {
            if (secs === 0) {
              return `${minutes}分`
            }
            return `${minutes}分 ${secs}秒`
          }
        } else {
          if (minutes === 0 && secs === 0) {
            return `${hours}小时`
          } else if (minutes !== 0 && secs === 0) {
            return `${hours}小时 ${minutes}分`
          }
        }
        return `${hours}小时 ${minutes}分 ${secs}秒`
      }
    },
    methods: {
      loadData() {
        this.outerDataLoading = true
        this.dataList = []
        getAction(this.url.mdcImplementLedgersList, this.queryParam).then(res => {
          if (res.success) {
            this.dataList = res.result.records
            this.hasRequestAlarmCodeList = []
          }
        }).finally(() => {
          this.outerDataLoading = false
        })
      },

      handleAdd: function(implementId = '', param = '') {
        this.$refs[param + 'modalForm'].add(implementId)
        this.$refs[param + 'modalForm'].title = '新增'
        this.$refs[param + 'modalForm'].disableSubmit = false
      },

      handleEdit: function(record, param = '') {
        this.$refs[param + 'modalForm'].edit(record)
        this.$refs[param + 'modalForm'].title = '编辑'
        this.$refs[param + 'modalForm'].disableSubmit = false
      },

      /**
       * ç‚¹å‡»è¡¨æ ¼ä¸­è¯¦æƒ…按钮事件
       * @param record é€‰ä¸­çš„当前行数据
       */
      handleDetail: function(record, param = '') {
        console.log(this.$refs[param + 'modalForm'])
        this.$refs[param + 'modalForm'].edit(record)
        this.$refs[param + 'modalForm'].title = '详情'
        this.$refs[param + 'modalForm'].disableSubmit = true
        // è°ƒç”¨æŠ½å±‰è¡¨å•ç»„件中的清除表单验证方法
        // this.$refs[param + 'modalForm'].removeValidate()
      },

      handleDelete: function(id, param) {
        var that = this
        let url
        if (param != 'sub') {
          url = '/mdc/mdcImplementLedgers/delete'
        } else {
          url = '/mdc/mdcImplementLedgersSub/delete'
        }
        deleteAction(url, { id: id }).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(1)
            that.$notification.success({
              message: '消息',
              description: res.message
            })
            that.loadData()
          } else {
            that.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },

      /**
       * è‡ªå®šä¹‰è¡¨æ ¼è¡Œè§¦å‘
       * @param expanded å½“前行是否为展开状态
       * @param record å½“前行信息
       */
      handleExpandChange(expanded, record) {
        let _this = this
        // å½“展开时若该行未被展开过才会请求后台数据，展开过的数据会被缓存无需重复请求
        if (expanded && !this.hasRequestAlarmCodeList.includes(record.id)) {
          this.innerDataLoading = true
          getAction(this.url.mdcImplementLedgersSubList, { implementId: record.id }).then(res => {
            if (res.success) {
              _this.dataList.forEach(item => {
                if (item.id === record.id) {
                  item.innerDataList = res.result.records
                }
              })
              _this.hasRequestAlarmCodeList.push(record.id)
            }
          })
            .finally(() => {
              _this.innerDataLoading = false
            })
        }
      }
    }
  }
</script>
<style scoped>
  /deep/ .ant-table-body tr:not(.ant-table-expanded-row) td {
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    /*cursor: pointer;*/
  }

  /deep/ .ant-table-fixed-right .ant-table-expanded-row {
    display: none;
  }
</style>

 src/views/system/modules/MdcEquipmentImplementLedger/MdcImplementLedgersModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,318 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="disableSubmit"
    :width="drawerWidth"
    @cancel="visible=false"
    :visible="visible"
    :footer="null"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyName">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入公司名称"
                       v-model="model.companyName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productionName">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入车间名称" v-model="model.productionName"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="工段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sectionName">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入工段名称"
                       v-model="model.sectionName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备编号"
                       v-model="model.equipmentId"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentName">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备名称" v-model="model.equipmentName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentModel">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备型号"
                       v-model="model.equipmentModel"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备系统类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备系统类型"
                       v-model="model.controlSystem"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="设备责任人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input allow-clear :readOnly="disableSubmit" placeholder="请输入设备责任人"
                       v-model="model.responsible"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备安放位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input allow-clear :readOnly="disableSubmit" placeholder="请输入设备安放位置" v-model="model.equipmentPosition"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备安放时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.placementTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="MDC安装情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch :disabled="disableSubmit" v-model="model.isMdcInstall"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="MDC硬件安装" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch :disabled="disableSubmit" v-model="model.isMdcHardwareInstall"></j-switch>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="MDC安装时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.mdcInstallTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="DNC安装情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch :disabled="disableSubmit" v-model="model.isDncInstall"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="DNC硬件安装" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch :disabled="disableSubmit" v-model="model.isDncHardwareInstall"></j-switch>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="DNC安装时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.dncInstallTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>

    <div class="drawer-bottom-button" v-if="!disableSubmit">
      <a-popconfirm title="确定放弃操作？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-modal>

</template>

<script>
  import pick from 'lodash.pick'
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'MdcImplementLedgersModal',
    components: {},
    data() {
      return {
        modalWidth: 800,
        drawerWidth: 700,
        modalToggleFlag: true,
        disableSubmit: true,
        form: this.$form.createForm(this),
        validatorRules: {
          // equipmentId:
          //   [
          //     {
          //       required: true, message: '请选择设备编号!'
          //     }
          //   ],
          // equipmentName:
          //   [
          //     {
          //       required: true, message: '请输入设备名称!'
          //     }
          //   ],
          // equipmentModel:
          //   [
          //     {
          //       required: true, message: '请输入设备型号!'
          //     }
          //   ]
        },
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        url: {
          add: '/mdc/mdcImplementLedgers/add',
          edit: '/mdc/mdcImplementLedgers/edit'
        }
      }
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        let that = this
        that.visible = true
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize()
        that.model = Object.assign({}, record)
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modalToggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modalToggleFlag = !this.modalToggleFlag
      },
      // æ ¹æ®å±å¹•å˜åŒ–,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 700
        }
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
      },
      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let url
            if (!this.model.id) {
              url = that.url.add
            } else {
              url = that.url.edit
            }
            console.log('model', that.model)
            postAction(url, that.model).then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false
          }
        })
      },
      /**
       * ç¼–辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate() {
        this.$refs.form.clearValidate()
      }
    }

  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bottom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>

 src/views/system/modules/MdcEquipmentImplementLedger/MdcImplementLedgersSubModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="disableSubmit"
    :width="drawerWidth"
    @cancel="visible=false"
    :visible="visible"
    :footer="null"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="变更时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="alterTime">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.alterTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="变更原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="alterReason">
              <a-select :disabled="disableSubmit" placeholder="请选择变更原因" :triggerChange="true"
                        v-model="model.alterReason">
                <a-select-option v-for='item in selectList' :key='item.value' :value='item.value'>
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备位置确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="locationStatus">
              <a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备位置确认"
                       v-model="model.locationStatus"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备网络确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="networkStatus">
              <a-select :disabled="disableSubmit" placeholder="请选择变更原因" :triggerChange="true"
                        v-model="model.networkStatus">
                <a-select-option value='未恢复'>未恢复</a-select-option>
                <a-select-option value='已恢复'>已恢复</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="MDC功能确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mdcFunctionStatus">
              <j-switch :disabled="disableSubmit" v-model="model.mdcFunctionStatus"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="MDC模块确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mdcModuleStatus">
              <j-switch :disabled="disableSubmit" v-model="model.mdcModuleStatus"></j-switch>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="DNC功能确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dncFunctionStatus">
              <j-switch :disabled="disableSubmit" v-model="model.dncFunctionStatus"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="DNC模块确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dncModuleStatus">
              <j-switch :disabled="disableSubmit" v-model="model.dncModuleStatus"></j-switch>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="反馈人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input allow-clear :readOnly="disableSubmit" placeholder="请输入反馈人" v-model="model.feedbackBy"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="反馈时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.feedbackTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="维护人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input allow-clear :readOnly="disableSubmit" placeholder="请输入维护人员" v-model="model.maintenanceBy"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="处理时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker allow-clear :disabled="disableSubmit" v-model="model.maintenanceTime" format='YYYY-MM-DD'
                             value-format="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="处理过程描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input allow-clear :readOnly="disableSubmit" placeholder="请输入处理过程描述" v-model="model.maintenanceRemark"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="处理结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch :disabled="disableSubmit" v-model="model.maintenanceResult"></j-switch>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>

    <div class="drawer-bottom-button" v-if="!disableSubmit">
      <a-popconfirm title="确定放弃操作？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-modal>

</template>

<script>
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'MdcImplementLedgersModal',
    components: {},
    data() {
      return {
        modalWidth: 800,
        drawerWidth: 700,
        modalToggleFlag: true,
        disableSubmit: true,
        form: this.$form.createForm(this),
        validatorRules: {},
        title: '操作',
        visible: false,
        model: {},
        selectList: [
          {
            label: '搬迁',
            value: '搬迁'
          },
          {
            label: 'ç»´ä¿®',
            value: 'ç»´ä¿®'
          },
          {
            label: '大修',
            value: '大修'
          },
          {
            label: '报废',
            value: '报废'
          },
          {
            label: '其他',
            value: '其他'
          }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        url: {
          add: '/mdc/mdcImplementLedgersSub/add',
          edit: '/mdc/mdcImplementLedgersSub/edit'
        }
      }
    },
    methods: {
      add(implementId) {
        this.edit({ implementId })
      },
      edit(record) {
        let that = this
        that.visible = true
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize()
        that.model = Object.assign({}, record)
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modalToggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modalToggleFlag = !this.modalToggleFlag
      },
      // æ ¹æ®å±å¹•å˜åŒ–,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 700
        }
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
      },
      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let url
            if (!this.model.id) {
              url = that.url.add
            } else {
              url = that.url.edit
            }
            console.log('model', that.model)
            postAction(url, that.model).then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false
          }
        })
      },
      /**
       * ç¼–辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate() {
        this.$refs.form.clearValidate()
      }
    }

  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bottom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>