From b590b01a1d2b01136543e04b2aebf45b51883d0c Mon Sep 17 00:00:00 2001
From: lwh <2679599887@qq.com>
Date: Fri, 30 Jun 2023 09:38:32 +0800
Subject: [PATCH] =?UTF-8?q?fixed=20=E4=BB=A3=E7=A0=81=E5=BA=93=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E7=B1=BB=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataTable.jsx                  |   2 +-
 .../components/AddCodeModuleDialog.vue        |  38 ++--
 .../components/DetailCodeModuleDialog.vue     | 136 ++++++------
 .../components/EditCodeModuleDialog.vue       | 198 +++++++++---------
 src/pages/index/code/code_module/index.vue    |  34 +--
 5 files changed, 221 insertions(+), 187 deletions(-)

diff --git a/src/components/DataTable.jsx b/src/components/DataTable.jsx
index b8b66de..ae9518e 100644
--- a/src/components/DataTable.jsx
+++ b/src/components/DataTable.jsx
@@ -19,7 +19,7 @@ export default defineComponent({
       params = {},
       loading = {},
       debug = false,
-      border = true,
+      border = false,
       ...attr
     } = attrs;
 
diff --git a/src/pages/index/code/code_module/components/AddCodeModuleDialog.vue b/src/pages/index/code/code_module/components/AddCodeModuleDialog.vue
index a6c1a33..67bea48 100644
--- a/src/pages/index/code/code_module/components/AddCodeModuleDialog.vue
+++ b/src/pages/index/code/code_module/components/AddCodeModuleDialog.vue
@@ -3,15 +3,16 @@
     <el-form ref="formRef" :model="formData" :rules="rules">
       <el-row>
 
-
         <el-col :span="12">
-          <el-form-item :label-width="labelWidth" label="所属客户" prop="customer_guid">
-            <el-input v-model='formData.customer_guid' type="text" placeholder='请输入所属客户'></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label-width="labelWidth" label="类目" prop="code_module_catetory_guid">
-            <el-input v-model='formData.code_module_catetory_guid' type="text" placeholder='请输入类目'></el-input>
+          <el-form-item :label-width="labelWidth" label="类目" prop="code_module_category_guid">
+            <el-cascader class="w100" filterable :options="dataList"
+              :props="{ checkStrictly: false, value: 'code_module_category_guid', label: 'code_module_category_name', emitPath: false }"
+              placeholder="请选择类目" clearable v-model="formData.code_module_category_guid">
+              <template #default="{ node, data }">
+                <span>{{ data.code_module_category_name }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -64,6 +65,7 @@
 <script setup>
 import { reactive, ref, watch } from "vue";
 import { addCodeModule, getDictionary } from "~/service/code_module";
+import { getCodeModuleCategoryList } from "~/service/code_module_category";
 import { useLoginStore } from "~/store";
 
 // --业务参数
@@ -80,7 +82,15 @@ async function get_audit_status() {
   })
 }
 
-
+//获取代码块类目树形列表
+const dataList = ref([])
+async function getList() {
+  await getCodeModuleCategoryList({ 'all': true }).then((res) => {
+    if (res.code == 0) {
+      dataList.value = res.data
+    }
+  })
+}
 
 
 // --基础参数
@@ -110,10 +120,10 @@ watch(props, (v) => {
 });
 
 const rules = reactive({
-  code_module_catetory_guid: [
+  code_module_category_guid: [
     {
       required: true,
-      message: '类目不能为空'
+      message: '代码库类目不能为空'
     }
   ],
   code_module_name: [
@@ -147,9 +157,9 @@ const rules = reactive({
 // --基础方法
 
 // 打开弹窗时执行
-const openDialog = () => {
-  get_audit_status()
-
+const openDialog = async () => {
+  await get_audit_status()
+  await getList()
 };
 
 const closeDialog = () => {
diff --git a/src/pages/index/code/code_module/components/DetailCodeModuleDialog.vue b/src/pages/index/code/code_module/components/DetailCodeModuleDialog.vue
index 55aa929..efff923 100644
--- a/src/pages/index/code/code_module/components/DetailCodeModuleDialog.vue
+++ b/src/pages/index/code/code_module/components/DetailCodeModuleDialog.vue
@@ -1,55 +1,53 @@
 <template>
-  <el-dialog v-model="props.modelValue" title="代码块详情" width="900px" @closed="closeDialog"  @open="openDialog">
+  <el-dialog v-model="props.modelValue" title="代码块详情" width="900px" @closed="closeDialog" @open="openDialog">
     <el-form ref="formRef" :model="formData" :disabled="true">
       <el-row>
-        
-        
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="所属客户" prop="customer_guid">
-                                  <el-input v-model='formData.customer_guid' type="text" placeholder='请输入所属客户'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="类目" prop="code_module_catetory_guid">
-                                  <el-input v-model='formData.code_module_catetory_guid' type="text" placeholder='请输入类目'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="代码块名称" prop="code_module_name">
-                                  <el-input v-model='formData.code_module_name' type="text" placeholder='请输入代码块名称'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="html内容" prop="code_module_html">
-                                  <el-input v-model='formData.code_module_html' type="textarea" :rows="5" placeholder='请输入html内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="style内容" prop="code_module_style">
-                                  <el-input v-model='formData.code_module_style' type="textarea" :rows="5" placeholder='请输入style内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="script内容" prop="code_module_script">
-                                  <el-input v-model='formData.code_module_script' type="textarea" :rows="5" placeholder='请输入script内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="排序" prop="code_module_sort">
-                                  <el-input-number v-model='formData.code_module_sort' controls-position='right' :min='1'></el-input-number>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item label="审核状态" prop="code_module_audit">
-                               <el-select v-model="formData.code_module_audit" clearable placeholder="请选择">
-                                       <el-option
-                                           v-for="item in audit_status"
-                                           :key="item.dictionary_guid" :label="item.dictionary_name"
-                                           :value="item.dictionary_value"
-                                           ></el-option>
-                                   </el-select>
-                               </el-form-item>
-                           </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="类目" prop="code_module_catetory_guid">
+            <el-cascader class="w100" filterable :options="dataList"
+              :props="{ checkStrictly: false, value: 'code_module_category_guid', label: 'code_module_category_name', emitPath: false }"
+              placeholder="请选择类目" clearable v-model="formData.code_module_category_guid">
+              <template #default="{ node, data }">
+                <span>{{ data.code_module_category_name }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="代码块名称" prop="code_module_name">
+            <el-input v-model='formData.code_module_name' type="text"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="html内容" prop="code_module_html">
+            <el-input v-model='formData.code_module_html' type="textarea" :rows="5"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="style内容" prop="code_module_style">
+            <el-input v-model='formData.code_module_style' type="textarea" :rows="5"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="script内容" prop="code_module_script">
+            <el-input v-model='formData.code_module_script' type="textarea" :rows="5"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="code_module_sort">
+            <el-input-number v-model='formData.code_module_sort' controls-position='right' :min='1'></el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="审核状态" prop="code_module_audit">
+            <el-select v-model="formData.code_module_audit" clearable>
+              <el-option v-for="item in audit_status" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
 
       </el-row>
     </el-form>
@@ -59,6 +57,7 @@
 <script setup>
 import { reactive, ref, watch } from "vue";
 import { isEmptyObject } from "~/utils/index";
+import { getCodeModuleCategoryList } from "~/service/code_module_category";
 import { getDictionary } from '~/service/code_module';
 
 // --业务参数
@@ -67,14 +66,23 @@ import { getDictionary } from '~/service/code_module';
 
 // --业务方法
 
-                   // 字典获取
-                   const audit_status = ref([]);
-                   async function get_audit_status() {
-                     await getDictionary({ dictionary_value: 'audit_status'}).then((res) => {
-                       audit_status.value = res
-                     })
-                   }
+// 字典获取
+const audit_status = ref([]);
+async function get_audit_status() {
+  await getDictionary({ dictionary_value: 'audit_status' }).then((res) => {
+    audit_status.value = res
+  })
+}
 
+//获取代码块类目树形列表
+const dataList = ref([])
+async function getList() {
+  await getCodeModuleCategoryList({ 'all': true }).then((res) => {
+    if (res.code == 0) {
+      dataList.value = res.data
+    }
+  })
+}
 
 
 // --基础参数
@@ -95,15 +103,15 @@ const formData = ref({
 // --基础方法
 watch(props, (v) => {
   formData.value = v.data;
-  
-  
+
+
 });
 
 // 打开弹窗时执行
-const openDialog = () => {
-  
-  get_audit_status()
-                   
+const openDialog = async () => {
+  await get_audit_status()
+  await getList()
+
 };
 
 const closeDialog = () => {
@@ -111,6 +119,4 @@ const closeDialog = () => {
 };
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/src/pages/index/code/code_module/components/EditCodeModuleDialog.vue b/src/pages/index/code/code_module/components/EditCodeModuleDialog.vue
index d3399f2..742c08c 100644
--- a/src/pages/index/code/code_module/components/EditCodeModuleDialog.vue
+++ b/src/pages/index/code/code_module/components/EditCodeModuleDialog.vue
@@ -2,54 +2,53 @@
   <el-dialog v-model="props.modelValue" title="编辑代码块" width="900px" @closed="closeDialog" @open="openDialog">
     <el-form ref="formRef" :model="formData" :rules="rules">
       <el-row>
-        
-        
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="所属客户" prop="customer_guid">
-                                  <el-input v-model='formData.customer_guid' type="text" placeholder='请输入所属客户'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="类目" prop="code_module_catetory_guid">
-                                  <el-input v-model='formData.code_module_catetory_guid' type="text" placeholder='请输入类目'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="代码块名称" prop="code_module_name">
-                                  <el-input v-model='formData.code_module_name' type="text" placeholder='请输入代码块名称'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="html内容" prop="code_module_html">
-                                  <el-input v-model='formData.code_module_html' type="textarea" :rows="5" placeholder='请输入html内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="style内容" prop="code_module_style">
-                                  <el-input v-model='formData.code_module_style' type="textarea" :rows="5" placeholder='请输入style内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="24">
-                               <el-form-item :label-width="labelWidth" label="script内容" prop="code_module_script">
-                                  <el-input v-model='formData.code_module_script' type="textarea" :rows="5" placeholder='请输入script内容'></el-input>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item :label-width="labelWidth" label="排序" prop="code_module_sort">
-                                  <el-input-number v-model='formData.code_module_sort' controls-position='right' :min='1'></el-input-number>
-                               </el-form-item>
-                           </el-col>
-                           <el-col :span="12">
-                               <el-form-item label="审核状态" prop="code_module_audit">
-                               <el-select v-model="formData.code_module_audit" clearable placeholder="请选择">
-                                       <el-option
-                                           v-for="item in audit_status"
-                                           :key="item.dictionary_guid" :label="item.dictionary_name"
-                                           :value="item.dictionary_value"
-                                           ></el-option>
-                                   </el-select>
-                               </el-form-item>
-                           </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="类目" prop="code_module_catetory_guid">
+            <el-cascader class="w100" filterable :options="dataList"
+              :props="{ checkStrictly: false, value: 'code_module_category_guid', label: 'code_module_category_name', emitPath: false }"
+              placeholder="请选择类目" clearable v-model="formData.code_module_category_guid">
+              <template #default="{ node, data }">
+                <span>{{ data.code_module_category_name }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="代码块名称" prop="code_module_name">
+            <el-input v-model='formData.code_module_name' type="text" placeholder='请输入代码块名称'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="html内容" prop="code_module_html">
+            <el-input v-model='formData.code_module_html' type="textarea" :rows="5" placeholder='请输入html内容'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="style内容" prop="code_module_style">
+            <el-input v-model='formData.code_module_style' type="textarea" :rows="5" placeholder='请输入style内容'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label-width="labelWidth" label="script内容" prop="code_module_script">
+            <el-input v-model='formData.code_module_script' type="textarea" :rows="5"
+              placeholder='请输入script内容'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="code_module_sort">
+            <el-input-number v-model='formData.code_module_sort' controls-position='right' :min='1'></el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="审核状态" prop="code_module_audit">
+            <el-select v-model="formData.code_module_audit" clearable placeholder="请选择">
+              <el-option v-for="item in audit_status" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
 
       </el-row>
     </el-form>
@@ -64,23 +63,34 @@
 
 <script setup>
 import { reactive, ref, watch } from "vue";
-import { editCodeModule , getDictionary } from "~/service/code_module";
+import { editCodeModule, getDictionary } from "~/service/code_module";
+import { getCodeModuleCategoryList } from "~/service/code_module_category";
 import { useLoginStore } from "~/store";
 
+
 // --业务参数
 
 
 
 // --业务方法
 
-                   // 字典获取
-                   const audit_status = ref([]);
-                   async function get_audit_status() {
-                     await getDictionary({ dictionary_value: 'audit_status'}).then((res) => {
-                       audit_status.value = res
-                     })
-                   }
+// 字典获取
+const audit_status = ref([]);
+async function get_audit_status() {
+  await getDictionary({ dictionary_value: 'audit_status' }).then((res) => {
+    audit_status.value = res
+  })
+}
 
+//获取代码块类目树形列表
+const dataList = ref([])
+async function getList() {
+  await getCodeModuleCategoryList({ 'all': true }).then((res) => {
+    if (res.code == 0) {
+      dataList.value = res.data
+    }
+  })
+}
 
 
 
@@ -110,14 +120,14 @@ const uoloadData = ref({
 // --基础方法
 watch(props, (v) => {
   formData.value = v.data;
-  
-  
+
+
 });
 
 // 打开弹窗时执行
-const openDialog = () => {
-  get_audit_status()
-                   
+const openDialog = async () => {
+  await get_audit_status()
+  await getList()
 };
 
 const closeDialog = () => {
@@ -127,36 +137,36 @@ const closeDialog = () => {
 
 const rules = reactive({
   code_module_catetory_guid: [
-                               {
-                               required: true,
-                               message: '类目不能为空'
-                               }
-                           ],
-                           code_module_name: [
-                               {
-                               required: true,
-                               message: '代码块名称不能为空'
-                               }
-                           ],
-                           code_module_html: [
-                               {
-                               required: true,
-                               message: 'html内容不能为空'
-                               }
-                           ],
-                           code_module_sort: [
-                               {
-                               required: true,
-                               message: '排序不能为空'
-                               }
-                           ],
-                           code_module_audit: [
-                               {
-                               required: true,
-                               message: '审核状态不能为空'
-                               }
-                           ],
-                           
+    {
+      required: true,
+      message: '类目不能为空'
+    }
+  ],
+  code_module_name: [
+    {
+      required: true,
+      message: '代码块名称不能为空'
+    }
+  ],
+  code_module_html: [
+    {
+      required: true,
+      message: 'html内容不能为空'
+    }
+  ],
+  code_module_sort: [
+    {
+      required: true,
+      message: '排序不能为空'
+    }
+  ],
+  code_module_audit: [
+    {
+      required: true,
+      message: '审核状态不能为空'
+    }
+  ],
+
 });
 
 const handleEditClick = async (formEl) => {
@@ -168,7 +178,7 @@ const handleEditClick = async (formEl) => {
     }
     isBtnLod.value = true;
 
-    
+
     const { code } = await editCodeModule(formData.value);
     if (code == 0) {
       closeDialog();
@@ -183,6 +193,4 @@ const handleResetClick = async (formEl) => {
 };
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/src/pages/index/code/code_module/index.vue b/src/pages/index/code/code_module/index.vue
index b9719e9..b21f863 100644
--- a/src/pages/index/code/code_module/index.vue
+++ b/src/pages/index/code/code_module/index.vue
@@ -7,11 +7,15 @@
   <!-- 搜索 -->
   <el-form inline :model="params">
 
-    <el-form-item label="客户名称">
-      <el-input v-model='params.customer_name' placeholder='请输入客户名称'></el-input>
-    </el-form-item>
     <el-form-item label="类目">
-      <el-input v-model='params.code_module_catetory_guid' placeholder='请输入类目'></el-input>
+      <el-cascader class="w100" filterable :options="dataList"
+        :props="{ checkStrictly: false, value: 'code_module_category_guid', label: 'code_module_category_name', emitPath: false }"
+        placeholder="请选择类目" clearable v-model="params.code_module_category_guid">
+        <template #default="{ node, data }">
+          <span>{{ data.code_module_category_name }}</span>
+          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+        </template>
+      </el-cascader>
     </el-form-item>
     <el-form-item label="代码块名称">
       <el-input v-model='params.code_module_name' placeholder='请输入代码块名称'></el-input>
@@ -124,6 +128,7 @@ import { ArrowDown } from '@element-plus/icons-vue';
 import { ref, reactive, watch } from 'vue';
 import { useLoginStore } from "~/store";
 import { getCodeModuleList, editCodeModule, deleteCodeModule, getDictionary, downloadTemplate, importExcel, exportExcel, audit } from '~/service/code_module';
+import { getCodeModuleCategoryList } from "~/service/code_module_category";
 import AddCodeModuleDialog from './components/AddCodeModuleDialog.vue';
 import EditCodeModuleDialog from './components/EditCodeModuleDialog.vue';
 import DetailCodeModuleDialog from './components/DetailCodeModuleDialog.vue';
@@ -146,10 +151,10 @@ const headers = {
 // 查询参数
 const params = reactive({
   customer_guid: "",
-  code_module_catetory_guid: "",
+  code_module_category_guid: "",
   code_module_name: "",
   code_module_audit: "",
-
+  
 });
 const column = [
 
@@ -158,12 +163,7 @@ const column = [
     type: 'selection'
   },
   {
-    prop: "customer_name",
-    label: '所属客户',
-    width: '150'
-  },
-  {
-    prop: "code_module_catetory_name",
+    prop: "code_module_category_name",
     label: '类目',
     width: '150'
   },
@@ -226,6 +226,16 @@ function handleDetail(row) {
   DetailCodeModuleDialogRow.value = row
 }
 
+//获取代码块类目树形列表
+const dataList = ref([])
+async function getList() {
+  await getCodeModuleCategoryList({ 'all': true }).then((res) => {
+    if (res.code == 0) {
+      dataList.value = res.data
+    }
+  })
+}
+getList()
 
 // 导入方法
 let loadingImoprt = null;