From c07a9afa70e53ae54e3586d6cb982e215ad8cb29 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 27 九月 2024 16:43:38 +0800
Subject: [PATCH] 整合代码添加校验

---
 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue |  307 +++++++++++++++++++++++++++++++--------------------
 1 files changed, 186 insertions(+), 121 deletions(-)

diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue
index 27f89a3..bba8a82 100644
--- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue
@@ -21,37 +21,24 @@
         </el-button>
       </template>
 
-      <!-- eventKey鎿嶄綔鎸夐挳 -->
-      <template slot="eventButtonForm" slot-scope="scope">
-        <div style="width: 100%;display: flex;justify-content: center">
-          <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">鍒涘缓</el-button>
-          <el-button plain size="mini" type="danger" @click="formDataDelClickHandler">鍒犻櫎</el-button>
-          <el-button plain size="mini" type="primary" @click="moveUp">涓婄Щ</el-button>
-          <el-button plain size="mini" type="primary" @click="moveDown">涓嬬Щ</el-button>
-        </div>
-      </template>
       <!-- eventKey浠ュ強eventValue鏄剧ず鍖哄煙 -->
       <template slot="bottomValueForm" slot-scope="scope">
-        <div style="height: 200px; width: 95%; border: 1px solid #bdbbbb;overflow-y: auto">
-          <!-- 鍐呭 -->
-          <el-table
-            :data="FormData"
-            :highlight-current-row="true"
-            style="width: 100%"
-            @row-click="formDataRowClick">
-            <el-table-column
-              align="center"
-              label="EventKey"
-              prop="eventKey">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              label="EventValue"
-              prop="eventValue">
-            </el-table-column>
-          </el-table>
-        </div>
+        <avue-crud
+          :data="eventData"
+          :option="eventOption"
+          @row-click="formDataRowClick">
+          <template slot="menuLeft" slot-scope="scope">
+            <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">鍒涘缓</el-button>
+          </template>
+
+          <template slot="menu" slot-scope="scope">
+            <el-button plain size="mini" type="danger" @click="formDataDelClickHandler(scope.row)">鍒犻櫎</el-button>
+            <el-button plain size="mini" type="primary" @click="moveUp(scope.row)">涓婄Щ</el-button>
+            <el-button plain size="mini" type="primary" @click="moveDown(scope.row)">涓嬬Щ</el-button>
+          </template>
+        </avue-crud>
       </template>
+
 
       <!-- 鍒囨崲鎼滅储绫诲瀷 婧愬璞� 鐩爣瀵硅薄鏄剧ずlabel鍒囨崲 -->
       <template slot="showTypeLabel" slot-scope="{}">
@@ -68,9 +55,9 @@
       append-to-body="true"
       class="avue-dialog"
       title="閰嶇疆鎸夐挳"
-      width="70%"
+      width="75%"
       @close="dialogClose">
-      <el-container>
+      <el-container v-loading="dialogLoading">
         <el-header style="height: 40px !important;">
           <div style="display: flex">
             <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">娣诲姞
@@ -129,7 +116,12 @@
 
                   <el-form-item label="Action锛�" prop="Action">
                     <el-col :span="14">
-                      <el-input v-model="basicForm.actionOId" :readonly="disabledBtn"></el-input>
+                      <div style="display: flex">
+                        <el-input v-model="basicForm.actionName" :readonly="disabledBtn"></el-input>
+                        <el-button :disabled="disabledBtn" size="mini" style="margin-left: 10px" type="success"
+                                   @click="actionFoucus">閫夋嫨
+                        </el-button>
+                      </div>
                     </el-col>
                   </el-form-item>
 
@@ -168,10 +160,12 @@
               <el-divider content-position="left">鍙傛暟淇℃伅</el-divider>
               <avue-crud
                 ref="paramsCrud"
+                v-model="paramsForm"
                 :data="paramsData"
                 :option="paramsOption"
                 style="margin-top: 20px"
-                @row-save="paramsRowSave">
+                @row-save="paramsRowSave"
+                @row-update="paramsRowUpdate">
                 <template slot="menuLeft" slot-scope="scope">
                   <el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary"
                              @click="paramsRowAddClickHandler">鍒涘缓
@@ -179,6 +173,9 @@
                 </template>
 
                 <template slot="menu" slot-scope="scope">
+                  <el-button :disabled="disabledBtn" icon="el-icon-edit" size="small" type="text"
+                             @click="paramsRowEditHandler(scope.row)">淇敼
+                  </el-button>
                   <el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text"
                              @click="paramsRowDeleteHandler(scope.row)">鍒犻櫎
                   </el-button>
@@ -190,6 +187,7 @@
         </el-container>
       </el-container>
     </el-dialog>
+    <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
   </div>
 </template>
 
@@ -205,21 +203,74 @@
   addTapButton,
   updateTapButton, getTabByContextIdAndType
 } from "@/api/UI/uiDefine";
+import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action';
 
 export default {
   props: {
     sourceData: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     height: {
       type: String,
       default: () => "auto"
     }
   },
+  components: {
+    actionDialog
+  },
   name: "index",
   data() {
     return {
+      paramsForm:{},
+      eventOption: {
+        ...basicOption,
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        refreshBtn: false,
+        highlightCurrentRow: true,
+        height: 200,
+        column: [
+          {
+            label: 'EventKey',
+            prop: 'eventKey',
+            type: 'select',
+            value: 'SelectionEvent',
+            dicData: [
+              {
+                label: 'SelectionEvent',
+                value: 'SelectionEvent'
+              },
+              {
+                label: 'DBClickEvent',
+                value: 'DBClickEvent'
+              },
+              {
+                label: 'ClickEvent',
+                value: 'ClickEvent'
+              }
+            ],
+            cell: true
+          },
+          {
+            label: 'EventValue',
+            prop: 'eventValue',
+            cell: true,
+            rules: [
+              {
+                required: true,
+                message: '璇疯緭鍏ventValue',
+                trigger: 'blur'
+              }
+            ]
+          }
+        ]
+      },
+      eventData: [],
+      btnActionVisible: false,
+      dialogLoading: false,
       saveType: '',
       disabledBtn: true,
       paramsData: [],
@@ -235,11 +286,27 @@
         column: [
           {
             label: '鍚嶇О',
-            prop: 'name'
+            prop: 'name',
+            span: 24,
+            rules: [
+              {
+                required: true,
+                message: '璇疯緭鍏ュ悕绉�',
+                trigger: 'blur'
+              }
+            ]
           },
           {
             label: '鍊�',
-            prop: 'value'
+            prop: 'value',
+            span: 24,
+            rules: [
+              {
+                required: true,
+                message: '璇疯緭鍏ュ��',
+                trigger: 'blur'
+              }
+            ]
           }
         ]
       },
@@ -423,7 +490,6 @@
         ],
         group: [
           {
-            icon: 'el-icon-folder-opened',
             label: '',
             arrow: false,
             prop: 'group1',
@@ -716,45 +782,15 @@
             ]
           },
           {
-            icon: 'el-icon-folder-opened',
             label: '',
             arrow: false,
             prop: 'group2',
             column: [
               {
-                label: 'EventKey',
-                prop: 'eventKey',
-                type: 'select',
-                value: 'SelectionEvent',
-                dicData: [
-                  {
-                    label: 'SelectionEvent',
-                    value: 'SelectionEvent'
-                  },
-                  {
-                    label: 'DBClickEvent',
-                    value: 'DBClickEvent'
-                  },
-                  {
-                    label: 'ClickEvent',
-                    value: 'ClickEvent'
-                  }
-                ],
-              },
-              {
-                label: 'EventValue',
-                prop: 'eventValue',
-                labelWidth: 100
-              },
-              {
-                label: '',
-                prop: 'eventButton',
-                span: 24
-              },
-              {
                 label: '',
                 prop: 'bottomValue',
-                span: 24
+                span: 24,
+                labelWidth: 10
               },
             ]
           }
@@ -767,26 +803,28 @@
     }
   },
   watch: {
-    sourceData:{
+    sourceData: {
       handler(val) {
-        if(val && val.plOId) {
+        if (val && val.plOId) {
           this.getTableList()
+        } else {
+          this.data = [];
         }
       },
       immediate: true,
-      deep:true
+      deep: true
     }
   },
   computed: {},
   methods: {
     //鑾峰彇鍒楄〃鏁版嵁
-    getTableList(){
+    getTableList() {
       const params = {
-        pageContextOId:this.sourceData.plOId
+        pageContextOId: this.sourceData.plOId
       }
-      getPLPageDefinations( params).then(res => {
+      getPLPageDefinations(params).then(res => {
         this.data = res.data.data;
-        this.selectList=[];
+        this.selectList = [];
         this.$refs.crud.clearSelection();
         this.tableLoading = false;
       })
@@ -827,6 +865,11 @@
 
     // 澧炲姞
     addClickHandler() {
+      console.log(this.sourceData);
+      if (!this.sourceData || !this.sourceData.plOId) {
+        this.$message.error('璇峰湪涓婃柟閫夋嫨涓�鏉℃暟鎹悗杩涜娣诲姞');
+        return;
+      }
       this.$refs.crud.rowAdd();
     },
 
@@ -837,41 +880,37 @@
 
     // 瀵硅瘽妗嗚〃鏍兼坊鍔�
     formDataAddClickHandler() {
-      if (!this.form.eventKey) {
-        this.$message.error('璇烽�夋嫨EventKey');
-        return;
-      }
-
-      if (!this.form.eventValue) {
-        this.$message.error('璇疯緭鍏ventValue');
-        return;
-      }
-
-      if (this.FormData.length >= 1) {
-        const eventValueStatus = this.FormData.some(item => item.eventValue === this.form.eventValue);
-
-        if (eventValueStatus) {
-          this.$message.error('宸插瓨鍦ㄧ浉鍚岀殑 EventValue锛屼笉鑳介噸澶嶆坊鍔�');
-          return;
-        }
-      }
+      // if (!this.form.eventKey) {
+      //   this.$message.error('璇烽�夋嫨EventKey');
+      //   return;
+      // }
+      //
+      // if (!this.form.eventValue) {
+      //   this.$message.error('璇疯緭鍏ventValue');
+      //   return;
+      // }
+      //
+      // if (this.eventData.length >= 1) {
+      //   const eventValueStatus = this.eventData.some(item => item.eventValue === this.form.eventValue);
+      //
+      //   if (eventValueStatus) {
+      //     this.$message.error('宸插瓨鍦ㄧ浉鍚岀殑 EventValue锛屼笉鑳介噸澶嶆坊鍔�');
+      //     return;
+      //   }
+      // }
       const obj = {
-        index: this.FormData.length,
-        eventKey: this.form.eventKey,
-        eventValue: this.form.eventValue
+        index: this.eventData.length,
+        eventKey: this.form.eventKey || 'SelectionEvent',
+        eventValue: this.form.eventValue,
+        $cellEdit: true
       }
 
-      this.FormData.push(obj);
+      this.eventData.push(obj);
     },
 
     // 瀵硅瘽妗嗚〃鏍煎垹闄�
-    formDataDelClickHandler() {
-      if (func.isEmptyObject(this.formDataRow)) {
-        this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹�');
-        return;
-      }
-
-      this.FormData = this.FormData.filter(item => item.index !== this.formDataRow.index);
+    formDataDelClickHandler(row) {
+      this.eventData = this.eventData.filter(item => item.index !== row.index);
     },
 
     // 妯℃澘绫诲瀷鏄剧ず闅愯棌鏂规硶
@@ -930,22 +969,22 @@
     },
 
     // 涓婄Щ
-    moveUp() {
-      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
+    moveUp(row) {
+      const index = this.findIndexByEventValue(this.eventData, row.eventValue);
       if (index > 0) {
-        // 浣跨敤 splice 鏂规硶鏉ユā鎷熶氦鎹�
-        const temp = this.FormData.splice(index - 1, 1, this.FormData[index])[0]; // 绉婚櫎 index-1 鐨勫厓绱狅紝骞跺湪鐩稿悓浣嶇疆鎻掑叆 index 鐨勫厓绱狅紝杩斿洖琚Щ闄ょ殑鍏冪礌
-        this.FormData.splice(index, 1, temp); // 鍦� index 浣嶇疆鎻掑叆涔嬪墠琚Щ闄ょ殑鍏冪礌
+        // 浣跨敤 splice 鏉ユā鎷熶氦鎹�
+        const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // 绉婚櫎 index-1 鐨勫厓绱� 骞跺湪鐩稿悓浣嶇疆鎻掑叆 index 鐨勫厓绱� 杩斿洖琚Щ闄ょ殑鍏冪礌
+        this.eventData.splice(index, 1, temp); // 鍦� index 浣嶇疆鎻掑叆涔嬪墠琚Щ闄ょ殑鍏冪礌
       }
     },
 
     // 涓嬬Щ
-    moveDown() {
-      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
-      const length = this.FormData.length;
+    moveDown(row) {
+      const index = this.findIndexByEventValue(this.eventData, row.eventValue);
+      const length = this.eventData.length;
       if (index < length - 1) {
-        const temp = this.FormData[index];
-        this.FormData.splice(index, 1, this.FormData.splice(index + 1, 1, temp)[0]);
+        const temp = this.eventData[index];
+        this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]);
       }
     },
 
@@ -956,7 +995,7 @@
 
     // 鎸夐挳璁捐
     btnDesignClickHandler() {
-      if (this.selectList.length !=1) {
+      if (this.selectList.length != 1) {
         this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹�');
         return;
       }
@@ -973,11 +1012,11 @@
       getTabButtons(params).then(res => {
         if (res.data.code === 200) {
           const data = res.data.data;
-          this.treeData=[{
-              label: this.selectList[0].name,
-              oId: 'parentNode',
-              children:data
-            }];
+          this.treeData = [{
+            label: this.selectList[0].name,
+            oId: 'parentNode',
+            children: data
+          }];
           this.treeLoading = false;
         } else {
           this.$message.error('璇锋鏌ユ帶鍒跺彴閿欒');
@@ -1001,9 +1040,20 @@
       this.paramsData.splice(row.$index, 1)
     },
 
+    // 鎸夐挳璁捐淇℃伅鍙傛暟淇℃伅淇敼
+    paramsRowEditHandler(row) {
+      this.$refs.paramsCrud.rowEdit(row);
+    },
+
     // 鎸夐挳璁捐鍙傛暟淇℃伅娣诲姞鎸夐挳
     paramsRowAddClickHandler() {
       this.$refs.paramsCrud.rowAdd();
+    },
+
+    // 鎸夐挳璁捐鍙傛暟淇℃伅淇敼淇濆瓨
+    paramsRowUpdate(row, index, done, loading) {
+      this.paramsData.splice(index, 1, row);
+      done();
     },
 
     // 鎸夐挳璁捐鍙傛暟淇℃伅淇濆瓨
@@ -1037,7 +1087,7 @@
     // 鎸夐挳璁捐淇敼
     editClickBtnHandler() {
       if (func.isEmptyObject(this.nodeTreeRow)) {
-        this.$message.error('璇烽�夋嫨鑺傜偣杩涜娣诲姞');
+        this.$message.error('璇烽�夋嫨鑺傜偣杩涜淇敼');
         return;
       }
 
@@ -1060,6 +1110,7 @@
 
     // 鎸夐挳璁捐淇濆瓨
     saveClickBtnHandler() {
+      this.dialogLoading = true;
       const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton;
       const bottomParams = {};
       if (this.paramsData.length > 0) {
@@ -1085,7 +1136,10 @@
           this.getTabBtnTree();
           this.basicForm = {};
           this.paramsData = [];
+          this.dialogLoading = false;
         }
+      }).catch(err => {
+        this.dialogLoading = false;
       })
     },
 
@@ -1114,6 +1168,17 @@
         });
       });
     },
+
+    // 閫夋嫨action
+    actionFoucus() {
+      this.$refs.actionDialog.btnActionVisible = true;
+    },
+
+    // 淇濆瓨action
+    actionSaveHandler(val) {
+      this.$set(this.basicForm, 'actionName', val.plName);
+      this.$set(this.basicForm, 'actionOId', val.plOId);
+    }
   }
 }
 </script>

--
Gitblit v1.9.3