弹窗宽度+巡检点

src/components/module_ems/UModal/UModal.vue

@@ -22,8 +22,7 @@
           <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
         </a-col> -->
         <a-col class="right-btn">
-          <a-icon type="menu-fold" />
-          <a-icon type="menu-unfold" />
+          <a-icon :type="isModalFull?'menu-unfold':'menu-fold'" @click="isModalFull = !isModalFull"/>
           <!-- <a-icon type="column-width" /> -->
           <a-icon :type="isContentFull?'pic-right':'pic-center'" @click="isContentFull = !isContentFull"/>
           <a-button type="primary" @click="handleOk">确定</a-button>
@@ -70,6 +69,11 @@ export default {
         type: Boolean,
         default: false
       },
+      // 全屏显示
+      modalFull: {
+        type: Boolean,
+        default: false
+      },
       title: {
         type: String,
         default: '内容'
@@ -107,7 +111,7 @@ export default {
         innerFullscreen: this.fullscreen,
         // 内容展现形式：居中活全屏
         isContentFull: null,
-        isSetWidthFull: true,
+        isModalFull: false,
       }
     },
     computed: {
@@ -126,6 +130,8 @@ export default {
           'fullscreen': this.innerFullscreen,
           // 'no-title': this.isNoTitle,
           'no-footer': this.isNoFooter,
+          'modalFullcss': this.isModalFull,
+          'modalMarginLeft': !this.isModalFull
         }
       },
       modalStyle() {
@@ -179,6 +185,13 @@ export default {
           this.isContentFull = newV
         },
         immediate: true
+      },
+      modalFull: {
+        handler(newV, oldV){
+          console.log(newV, oldV)
+          this.isModalFull = newV
+        },
+        immediate: true
       }
     },
     methods: {
@@ -233,10 +246,8 @@ export default {
   .u-modal-box {
     // 宽高
     .ant-modal{
-      width: calc(100vw - 208px) !important;
       height: 100vh !important;
       padding: 0 !important;
-      margin-left: 208px;
       margin-right: 0;
       top: 0;
       .ant-modal-content{
@@ -363,6 +374,19 @@ export default {
     // }
   }
 
+  .modalFullcss{
+    .ant-modal{
+      width: 100vw !important;
+      margin-left: 0;
+    }
+  }
+  .modalMarginLeft{
+    .ant-modal{
+      width: calc(100vw - 208px) !important;
+      margin-left: 208px;
+    }
+  }
+
   @media (max-width: 767px) {
     .u-modal-box.fullscreen {
       margin: 0;

src/views/module_cmms/inspectContent/modules/InspectContentForm.vue

@@ -58,7 +58,7 @@
           <!-- :loading="loading" -->
         </a-table>
       </a-form-model>
-      <inspect-content-modal-add ref="addItemRef" :equipmentId="model.equipmentid" :selectData="model.cmmsInspectContentItemList" @ok="handleItemOk"></inspect-content-modal-add>
+      <inspect-content-modal-add ref="addItemRef" :equipmentId="model.equipmentid" :selectData="model.cmmsInspectContentItemList" @ok="handleOk"></inspect-content-modal-add>
     </j-form-container>
   </a-spin>
 </template>
@@ -217,7 +217,7 @@
 
         })
       },
-      handleItemOk(data){
+      handleOk(data){
         console.log(data)
         this.model.cmmsInspectContentItemList = data;
       }

src/views/module_cmms/inspectSpot/modules/InspectSpotForm.vue

@@ -15,11 +15,6 @@
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
-            <a-form-model-item label="选择设备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipdefid">
-              <a-input v-model="model.equipdefid" placeholder="请输入设备类型"  ></a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="24">
             <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
               <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
             </a-form-model-item>
@@ -27,12 +22,11 @@
         </a-row>
         <div class="cmms-dialog-item-title u-flex-jab">
           <div>巡检项目设置</div>
-          <div @click="addInspectItem"><a-icon type="plus"/>巡检项目</div>
+          <div @click="addInspectContent"><a-icon type="plus"/>巡检项目</div>
         </div>
         <a-table
           ref="table"
           size="middle"
-          :scroll="{x:true}"
           bordered
           rowKey="id"
           :columns="columns"
@@ -40,8 +34,21 @@
           :pagination="false"
           class="j-table-force-nowrap">
           <!-- :loading="loading" -->
+          <div slot="expandedRowRender" slot-scope="record">
+            <a-table
+              ref="table"
+              size="middle"
+              bordered
+              rowKey="id"
+              :columns="innerColumns"
+              :dataSource="record.cmmsInspectContentItemList"
+              :pagination="false"
+              class="j-table-force-nowrap">
+            </a-table>
+          </div>
         </a-table>
       </a-form-model>
+      <inspect-spot-modal-add ref="addContentRef"  :selectData="model.inspectContentList" @ok="handleOk"></inspect-spot-modal-add>
     </j-form-container>
   </a-spin>
 </template>
@@ -50,10 +57,12 @@
 
   import { httpAction, getAction } from '@/api/manage'
   import { validateDuplicateValue } from '@/utils/util'
+  import InspectSpotModalAdd from './InspectSpotModalAdd.vue'
 
   export default {
     name: 'InspectSpotForm',
     components: {
+        InspectSpotModalAdd
     },
     props: {
       //表单禁用
@@ -66,7 +75,8 @@
     data () {
       return {
         model:{
-         },
+          inspectContentList: []
+        },
         labelCol: {
           xs: { span: 24 },
           sm: { span: 5 },
@@ -81,7 +91,7 @@
         url: {
           add: "/cmmsInspectSpot/cmmsInspectSpot/add",
           edit: "/cmmsInspectSpot/cmmsInspectSpot/edit",
-          queryById: "/cmmsInspectSpot/cmmsInspectSpot/queryById"
+          queryById: "/cmmsInspectSpot/cmmsInspectSpot/queryById",
         },
         columns: [
           // {
@@ -125,6 +135,38 @@
             dataIndex: 'remark'
           }
         ],
+        innerColumns: [
+          // {
+          //   title: '#',
+          //   dataIndex: '',
+          //   key:'rowIndex',
+          //   width:60,
+          //   align:"center",
+          //   customRender:function (t,r,index) {
+          //     return parseInt(index)+1;
+          //   }
+          // },
+          {
+            title:'点检项编号',
+            align:"center",
+            dataIndex: 'itemcode'
+          },
+          {
+            title:'点检项名称',
+            align:"center",
+            dataIndex: 'itemname'
+          },
+          {
+            title:'标准',
+            align:"center",
+            dataIndex: 'inspectionstandards',
+          },
+          {
+            title:'备注',
+            align:"center",
+            dataIndex: 'remark'
+          }
+        ],
       }
     },
     computed: {
@@ -141,12 +183,17 @@
         this.visible = true;
         // this.edit(this.modelDefault);
       },
+      addInspectContent(){
+        this.$refs.addContentRef.add();
+        this.$refs.addContentRef.title = "选择巡检项目";
+      },
       edit (record) {
         this.visible = true;
         this.confirmLoading = true
         // this.model = Object.assign({}, record);
         getAction(this.url.queryById, {id: record.id}).then((res) => {
           this.model = res.result
+          console.log(res)
           this.confirmLoading = false
         })
       },
@@ -179,6 +226,12 @@
          
         })
       },
+      handleOk(data){
+        data.map(res=>{
+
+        })
+        this.model.inspectContentList = data;
+      },
     }
   }
 </script>

src/views/module_cmms/inspectSpot/modules/InspectSpotModalAdd.vue

@@ -0,0 +1,143 @@
+<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: 'SpotcheckContentModalAdd',
+    components: {
+        
+    },
+    props: {
+      //表单禁用
+      equipmentId: {
+        type: String,
+        default: ''
+      },
+      selectData: {
+        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:'巡检项目编号',
+            align:"center",
+            dataIndex: 'contentcode'
+          },
+          {
+            title:'巡检项目名称',
+            align:"center",
+            dataIndex: 'contentname'
+          },
+          {
+            title:'设备',
+            align:"center",
+            dataIndex: 'equipmentid'
+          },
+          // {
+          //   title:'状态',
+          //   align:"center",
+          //   dataIndex: 'status'
+          // },
+          {
+            title:'备注',
+            align:"center",
+            dataIndex: 'remark'
+          },
+        ],
+        dataSource: [],
+        url: {
+          getList: "/cmmsInspectItem/cmmsInspectItem/getItemByEqId",
+          contentList: "/cmmsInspectContent/cmmsInspectContent/listDetails",
+        },
+      }
+    },
+    methods: {
+      add () {
+        this.visible = true;
+        getAction(this.url.contentList, {status: '0'}).then((res) => {
+          this.dataSource = res.result.records
+        })
+        this.selectList()
+      },
+      // 将以选中的值重新在列表中选中
+      selectList() {
+        this.selectionRows = this.selectData
+        console.log(this.selectData)
+        this.selectedRowKeys = this.selectData.map((res) => {
+          return res.id
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.onClearSelected()
+        this.selectionRows = this.selectData
+        this.selectedRowKeys = this.selectData.map((res) => {
+          return res.id
+        })
+        this.dataSource = []
+      },
+      handleOk () {
+        console.log(this.selectionRows)
+        this.$emit('ok', this.selectionRows);
+        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>