点检内容优化

src/views/module_ems/cmmsSpotcheckContent/modules/CmmsSpotcheckContentForm.vue

@@ -2,28 +2,60 @@
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
-        <a-row>
-          <a-col :span="24">
-            <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="24">
-            <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="24">
-            <a-form-model-item label="设备id" :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="24">
-            <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 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="dataSource"
+          :pagination="false"
+          :loading="loading"
+          class="j-table-force-nowrap">
+        </a-table>
+        <cmms-spotcheck-content-modal-add ref="modalForm" @ok="modalFormOk" :modelForm="model" :dataList="dataSource" @customEvent="handleCustomEvent"></cmms-spotcheck-content-modal-add>
       </a-form-model>
     </j-form-container>
   </a-spin>
@@ -31,12 +63,19 @@
 
 <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 CmmsSpotcheckContentModalAdd from './CmmsSpotcheckContentModalAdd.vue'
 
   export default {
     name: 'CmmsSpotcheckContentForm',
+    mixins:[JeecgListMixin, mixinDevice],
     components: {
+        CmmsSpotcheckContentModalAdd
     },
     props: {
       //表单禁用
@@ -49,10 +88,10 @@
     data () {
       return {
         model:{
-         },
+        },
         labelCol: {
           xs: { span: 24 },
-          sm: { span: 5 },
+          sm: { span: 8 },
         },
         wrapperCol: {
           xs: { span: 24 },
@@ -60,8 +99,54 @@
         },
         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"
@@ -114,6 +199,26 @@
 
         })
       },
+      // 新增点检项
+      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.dataSource = data;
+      }
     }
   }
-</script>
+</script>
+
+<style scoped>
+@import "~@/assets/less/uStyle.less";
+</style>

src/views/module_ems/cmmsSpotcheckContent/modules/CmmsSpotcheckContentModal.vue

@@ -2,7 +2,7 @@
   <u-modal
     :title="title"
     :visible.sync="visible"
-    switchFullscreen
+    contentFull
     @ok="handleOk"
     :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"

src/views/module_ems/cmmsSpotcheckContent/modules/CmmsSpotcheckContentModalAdd.vue

@@ -0,0 +1,146 @@
+<template>
+    <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+        <a-table
+            ref="table"
+            size="middle"
+            :scroll="{x:true}"
+            bordered
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+            :pagination="false"
+            class="j-table-force-nowrap">
+        </a-table>
+
+    </j-modal>
+</template>
+
+<script>
+
+import { httpAction, getAction } from '@/api/manage'
+  
+  export default {
+    name: 'CmmsSpotcheckContentModalAdd',
+    components: {
+        
+    },
+    props: {
+      //表单禁用
+      modelForm: {
+        type: Object,
+        default: function(){
+            return {} // 使用工厂函数返回默认值
+        }
+      },
+      dataList: {
+        type: Array,
+        default: function(){
+            return [] // 使用工厂函数返回默认值
+        }
+      },
+    },
+    data () {
+      return {
+        title:'',
+        width:1000,
+        visible: false,
+        /* table选中keys*/
+        selectedRowKeys: [],
+        /* table选中records*/
+        selectionRows: [],
+        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: [],
+        url: {
+            getList: "/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/${equipmentid}"
+        },
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+        console.log(1111,this.modelForm)
+        getAction(`/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/${this.modelForm.equipmentid}`).then((res) => {
+            console.log(2222,res)
+            this.dataSource = res.result
+        })
+      },
+      // 将以选中的值重新在列表中选中
+      selectList() {
+        this.selectionRows = this.dataList
+        this.selectedRowKeys = this.dataList.map((res) => {
+            return res.id
+        })
+      },  
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.onClearSelected()
+      },
+      handleOk () {
+        console.log(this.selectionRows)
+        this.$emit('customEvent', this.selectionRows);
+        this.visible = false;
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      },
+      onSelectChange(selectedRowKeys, selectionRows) {
+        this.selectedRowKeys = selectedRowKeys;
+        this.selectionRows = selectionRows;
+        console.log(this.selectedRowKeys,this.selectionRows)
+      },
+      onClearSelected() {
+        this.selectedRowKeys = [];
+        this.selectionRows = [];
+      },
+    }
+  }
+</script>