From 53fdf22365f84addabebd5e3884d4fcac3827a2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E6=96=8C=E6=9D=B0?= <>
Date: Wed, 17 Apr 2024 16:14:59 +0800
Subject: [PATCH] ui

---
 .../basic-dictionary/CommonCharacters.vue     | 621 ++++++++++--------
 1 file changed, 361 insertions(+), 260 deletions(-)

diff --git a/src/views/basic-dictionary/CommonCharacters.vue b/src/views/basic-dictionary/CommonCharacters.vue
index 9e2b412..726a2c2 100644
--- a/src/views/basic-dictionary/CommonCharacters.vue
+++ b/src/views/basic-dictionary/CommonCharacters.vue
@@ -1,223 +1,289 @@
 <template>
   <div class="box">
-    <div style="position: relative">
-        <div class="middlebox">
+    <div>
+      <div class="middlebox">
         <div class="contenttitle">
           基础字典 /
-          <span class="contenttitleBold"
-            >常用字符</span
-          >
+          <span class="contenttitleBold">常用字符</span>
         </div>
-        <!-- <div class="seachinput">
-          <el-select
-            v-model="department"
-            placeholder="请搜索"
-            filterable
-            :filter-method="remoteMethodes"
-            default-first-option
-            @change="quckDepartments"
-            clearable
-            size="small"
-          >
-            <el-option
-              v-for="item in quckDepartment"
-              :key="item.id"
-              :label="item.displayName"
-              :value="item.id"
+      </div>
+      <div style="display: flex; margin-top: 7px">
+        <div
+          :style="
+            'width: 208px;overflow: scroll;height:' +
+            (window.pageHeight < 600 ? 480 : window.pageHeight - 100) +
+            'px;background-color: #fff; border-radius: 8px'
+          "
+        >
+          <div style="margin-top: 10px">
+            <el-tree
+              :data="category"
+              :props="treeprops"
+              @node-click="treeclick"
+              node-key="id"
+              ref="itemType"
+              highlight-current
+              auto-expand-parent
             >
-            </el-option>
-          </el-select>
-        </div> -->
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <div>
+                  <span class="treeicons">
+                    <!-- <i
+                        class="el-icon-document-remove"
+                        v-if="data.parentId == null"
+                      ></i> -->
+                    <img
+                      style="width: 20px; height: 20px; vertical-align: sub"
+                      src="@/assets/images/order.png"
+                      v-if="data.parentId == null"
+                    />
+                  </span>
+                  <span
+                    :class="data.parentId == null ? 'maxtitle' : 'mintitle'"
+                    >{{ node.label }}</span
+                  >
+                </div>
+              </span>
+            </el-tree>
+          </div>
         </div>
-        <div style="display: block; margin-top: 7px; margin-right: 110px">
-          <div style="background-color: #fff; padding: 15px; border-radius: 8px">
-                      <div id="printTest">
-            <el-table
-          :data="tableData"
-          row-key="id"
-          class="el-table__body-wrapper tbody"
-          @row-click="rowick"
-          highlight-current-row
-          :height="window.pageHeight < 600 ? 480 : window.pageHeight - 130"
-          ref="tableData"
-        >
-          <el-table-column prop="id" label="编号" width="300">
-          </el-table-column>
-          <el-table-column prop="displayName" label="名称" width="">
-          </el-table-column>
-          <el-table-column prop="commonCharName" label="字符类别" width="">
-          </el-table-column>
-          <el-table-column prop="creatorName" label="创建者" width="">
-          </el-table-column>
-          <el-table-column prop="lastModifierName" label="修改者" width="">
-          </el-table-column>
-          <!-- <el-table-column prop="simpleCode" label="简称" width="180">
+        <div style="display: block">
+          <div style="margin-left: 15px; display: flex">
+            <div
+              :style="
+                'width:' +
+                (window.pageWidth - 200 - 110 - 50 - 14) +
+                'px;padding: 15px;background-color: #fff;border-radius: 8px;'
+              "
+            >
+              <div id="printTest">
+                <el-table
+                  :data="tableData"
+                  row-key="id"
+                  class="el-table__body-wrapper tbody"
+                  @row-click="rowick"
+                  highlight-current-row
+                  :height="
+                    window.pageHeight < 600 ? 450 : window.pageHeight - 130
+                  "
+                  ref="tableData"
+                >
+                  <el-table-column prop="id" label="编号" width="300">
+                  </el-table-column>
+                  <el-table-column prop="displayName" label="名称" width="">
+                  </el-table-column>
+                  <el-table-column
+                    prop="commonCharTypeName"
+                    label="字符类别"
+                    width=""
+                  >
+                  </el-table-column>
+                  <el-table-column prop="creatorName" label="创建者" width="">
+                  </el-table-column>
+                  <el-table-column
+                    prop="lastModifierName"
+                    label="修改者"
+                    width=""
+                  >
+                  </el-table-column>
+                  <!-- <el-table-column prop="simpleCode" label="简称" width="180">
         </el-table-column> -->
-          <el-table-column prop="creationTime" label="创建时间" width="200">
-            <template slot-scope="scope">
-              {{ scope.row.creationTime | dateFormat }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="lastModificationTime"
-            label="修改时间"
-            width="200"
-          >
-            <template slot-scope="scope">
-              {{ scope.row.lastModificationTime | dateFormat }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="" align="center">
-            <template>
-              <el-tag
-                class="move"
-                style="
-                  cursor: move;
-                  background-color: rgb(245, 245, 245);
-                  border: none;
-                "
-                draggable="true"
+                  <el-table-column
+                    prop="creationTime"
+                    label="创建时间"
+                    width="200"
+                  >
+                    <template slot-scope="scope">
+                      {{ scope.row.creationTime | dateFormat }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="lastModificationTime"
+                    label="修改时间"
+                    width="200"
+                  >
+                    <template slot-scope="scope">
+                      {{ scope.row.lastModificationTime | dateFormat }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="" align="center">
+                    <template>
+                      <el-tag
+                        class="move"
+                        style="
+                          cursor: move;
+                          background-color: rgb(245, 245, 245);
+                          border: none;
+                        "
+                        draggable="true"
+                      >
+                        <i
+                          class="el-icon-d-caret"
+                          style="
+                            width: 1rem;
+                            height: 1rem;
+                            color: rgb(113, 113, 113);
+                          "
+                        ></i>
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+            <!-- 按钮区域 -->
+            <div style="margin-left: 10px">
+              <el-button type="" @click="add" class="commonbutton"
+                >新增</el-button
               >
-                <i
-                  class="el-icon-d-caret"
-                  style="width: 1rem; height: 1rem; color: rgb(113, 113, 113)"
-                ></i>
-              </el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
-          </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="edlits" class="commonbutton"
+                  >编辑</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="deleteid" class="commonbutton"
+                  >删除</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="topping" class="commonbutton"
+                  >置顶</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button type="" @click="toppings" class="commonbutton"
+                  >置底</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button
+                  type=""
+                  :disabled="isshow"
+                  @click="assertion"
+                  class="commonbutton"
+                  >排序</el-button
+                >
+              </div>
+              <div style="margin-top: 10px">
+                <el-button
+                  type=""
+                  :disabled="isshow"
+                  @click="cancellation"
+                  class="commonbutton"
+                  >取消</el-button
+                >
+              </div>
+            </div>
           </div>
         </div>
-        <!-- 按钮区域 -->
-        <div style="margin-left: 10px;margin-top: 3%;position: absolute;top: 0;right: 0;">
-      <el-button type="" @click="add" class="commonbutton">新增</el-button>
-      <div style="margin-top: 10px">
-        <el-button type="" @click="edlits" class="commonbutton">编辑</el-button>
-      </div>
-      <div style="margin-top: 10px">
-        <el-button type="" @click="deleteid" class="commonbutton"
-          >删除</el-button
-        >
-      </div>
-      <div style="margin-top: 10px">
-        <el-button type="" @click="topping" class="commonbutton"
-          >置顶</el-button
-        >
-      </div>
-      <div style="margin-top: 10px">
-        <el-button type="" @click="toppings" class="commonbutton"
-          >置底</el-button
-        >
-      </div>
-      <div style="margin-top: 10px">
-        <el-button
-          type=""
-          :disabled="isshow"
-          @click="assertion"
-          class="commonbutton"
-          >排序</el-button
-        >
       </div>
-      <div style="margin-top: 10px">
-        <el-button
-          type=""
-          :disabled="isshow"
-          @click="cancellation"
-          class="commonbutton"
-          >取消</el-button
-        >
-      </div>
-        </div>
-        <!-- <div class="cancelorconfirm"></div> -->
-        <!-- 新增或者编辑弹框 -->
+      <!-- <div class="cancelorconfirm"></div> -->
+      <!-- 新增或者编辑弹框 -->
 
-        <el-dialog
-          :title="title == 1 ? '新增' : '修改'"
-          :visible.sync="dialogVisible"
-          width="75%"
-          :close-on-click-modal="false"
-        >
-          <el-form ref="form" :model="form" label-width="80px">
-            <el-row>
-              <el-col :span="8">
-                <el-form-item label="编号">
-                  <el-input
-                    v-model="form.id"
-                    style="width: 65%"
-                    disabled
-                    size="small"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="字符类别">
-                  <el-select v-model="form.commonCharTypeId" placeholder="请选择" size="small">
-                <el-option v-for="item in category" :key="item.id" :label="item.displayName" :value="item.id" />
-              </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="名称">
-                  <el-input
-                    ref="refinput"
-                    v-model="form.displayName"
-                    style="width: 65%"
-                    size="small"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-divider></el-divider>
-              <el-col :span="4" style="margin-left: 15px">
-                <el-form-item label="创建者">
-                  <el-input v-model="form.creatorName" disabled size="small"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="创建时间">
-                  <el-input
-                    :value="form.creationTime | dateFormat"
-                    disabled
-                    size="small"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4">
-                <el-form-item label="修改者">
-                  <el-input v-model="form.lastModifierName" disabled size="small"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="修改时间">
-                  <el-input
-                    style="width: 85%"
-                    :value="form.lastModificationTime | dateFormat"
-                    disabled
-                    size="small"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-          <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false" class="difference">取 消</el-button>
-            <el-button type="primary" @click="addoredit" class="commonbutton"
-              >确 定</el-button
-            >
-          </span>
-        </el-dialog>
+      <el-dialog
+        :title="title == 1 ? '新增' : '修改'"
+        :visible.sync="dialogVisible"
+        width="75%"
+        :close-on-click-modal="false"
+      >
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="编号">
+                <el-input
+                  v-model="form.id"
+                  style="width: 65%"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="字符类别">
+                <el-select
+                  v-model="form.commonCharTypeId"
+                  placeholder="请选择"
+                  size="small"
+                >
+                  <el-option
+                    v-for="item in category"
+                    :key="item.id"
+                    :label="item.displayName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="名称">
+                <el-input
+                  ref="refinput"
+                  v-model="form.displayName"
+                  style="width: 65%"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-divider></el-divider>
+            <el-col :span="4" style="margin-left: 15px">
+              <el-form-item label="创建者">
+                <el-input
+                  v-model="form.creatorName"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="创建时间">
+                <el-input
+                  :value="form.creationTime | dateFormat"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="修改者">
+                <el-input
+                  v-model="form.lastModifierName"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="修改时间">
+                <el-input
+                  style="width: 85%"
+                  :value="form.lastModificationTime | dateFormat"
+                  disabled
+                  size="small"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false" class="difference"
+            >取 消</el-button
+          >
+          <el-button type="primary" @click="addoredit" class="commonbutton"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
 import Sortable from "sortablejs";
 import { mapState } from "vuex";
-import {
-  getCharacterCategories
-} from "../../request/systemapi";
-import { deletapi, getapi, postapi, putapi } from '@/api/api';
+import { getCharacterCategories } from "../../request/systemapi";
+import { deletapi, getapi, postapi, putapi } from "@/api/api";
 export default {
   data() {
     return {
@@ -226,7 +292,7 @@ export default {
       title: 1,
       form: {
         displayName: "",
-        commonCharTypeId:""
+        commonCharTypeId: "",
       },
       tableData: [],
       pages: {
@@ -237,26 +303,32 @@ export default {
       },
       initTableData: [],
       curRow: {},
-      department:"",
-      quckDepartment:[],
-      category:[]
+      department: "",
+      quckDepartment: [],
+      category: [],
+      treeprops: {
+        label: "displayName",
+        value: "id",
+        children: "treeChildren",
+      }, //左侧树形结构需要的数据
+      commonCharTypeId:""
     };
   },
   created() {
-    this.getlist();
-    this.getcategory()
+    // this.getlist();
+    this.getcategory();
   },
   mounted() {
     this.rowDrop();
   },
-   computed: {
+  computed: {
     ...mapState(["window"]),
   },
   methods: {
-    getcategory(){
-        getCharacterCategories(this.pages).then((res) => {
-        if(res.code!=-1){
-            this.category=[...res.data.items]
+    getcategory() {
+      getCharacterCategories(this.pages).then((res) => {
+        if (res.code != -1) {
+          this.category = [...res.data.items];
         }
       });
     },
@@ -289,25 +361,42 @@ export default {
     },
     quckDepartments(e) {
       if (e) {
-        this.tableData.forEach((item,index) => {
+        this.tableData.forEach((item, index) => {
           if (e == item.id) {
             this.$refs["tableData"].setCurrentRow(item);
             this.rowick(item);
-            this.searchup(item,index)
+            this.searchup(item, index);
           }
         });
       } else {
         this.remoteMethodes();
       }
     },
-     searchup(data,index) {
-      if(index>3){
-        const targetTop = this.$refs["tableData"].$el.querySelectorAll('.el-table__body tr')[index-1].getBoundingClientRect().top
-      const containerTop = this.$refs["tableData"].$el.querySelector('.el-table__body').getBoundingClientRect().top
-      const scrollParent = this.$refs["tableData"].$el.querySelector('.el-table__body-wrapper')
-      scrollParent.scrollTop = targetTop - containerTop
+    searchup(data, index) {
+      if (index > 3) {
+        const targetTop = this.$refs["tableData"].$el
+          .querySelectorAll(".el-table__body tr")
+          [index - 1].getBoundingClientRect().top;
+        const containerTop = this.$refs["tableData"].$el
+          .querySelector(".el-table__body")
+          .getBoundingClientRect().top;
+        const scrollParent = this.$refs["tableData"].$el.querySelector(
+          ".el-table__body-wrapper"
+        );
+        scrollParent.scrollTop = targetTop - containerTop;
       }
-},
+    },
+    treeclick(data) {
+      this.commonCharTypeId = data.id;
+      postapi("/api/app/CommonChar/GetCommonCharList",{
+        commonCharTypeId:this.commonCharTypeId
+      }).then((res) => {
+        if (res.code != -1) {
+         this.initTableData = [...res.data];
+          this.tableData = res.data;
+        }
+      });
+    },
     cancellation() {
       this.$message.info("取消操作");
       this.isshow = true;
@@ -321,17 +410,19 @@ export default {
         // const currentDisplayOrder = this.tableData.length -1
         // const currentDisplayOrder = this.initTableData[index].displayOrder;
         // if (item.displayOrder != currentDisplayOrder) {
-          // 如果它的displayOrder和它当前所在的位置不同代表挪动过位置
-          result.push({ id: item.id, displayOrder: index+1 });
+        // 如果它的displayOrder和它当前所在的位置不同代表挪动过位置
+        result.push({ id: item.id, displayOrder: index + 1 });
         // }
       });
-      putapi("/api/app/commonchar/updatesortmany",{ itemList: result }).then((res) => {
-        if(res.code!=-1){
-          this.getlist();
-          this.isshow = true;
-          this.$message.success('操作成功')
+      putapi("/api/app/commonchar/updatesortmany", { itemList: result }).then(
+        (res) => {
+          if (res.code != -1) {
+            this.getlist();
+            this.isshow = true;
+            this.$message.success("操作成功");
+          }
         }
-      });
+      );
     },
     //初始化
     rowDrop() {
@@ -343,9 +434,9 @@ export default {
           animation: 300,
           // 指定父元素下可被拖拽的子元素
           // draggable: ".module-manager .el-table__row",
-          onChoose({oldIndex}){
-            _this.$refs['tableData'].setCurrentRow(_this.tableData[oldIndex]);
-            _this.rowick(_this.tableData[oldIndex])
+          onChoose({ oldIndex }) {
+            _this.$refs["tableData"].setCurrentRow(_this.tableData[oldIndex]);
+            _this.rowick(_this.tableData[oldIndex]);
           },
           onEnd({ newIndex, oldIndex }) {
             // console.log(arr);
@@ -369,10 +460,12 @@ export default {
       if (this.form.id == undefined) {
         this.$message.warning("请选择操作的数据");
       } else {
-        putapi(`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=1`).then((res) => {
-          if(res.code!=-1){
+        putapi(
+          `/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=1`
+        ).then((res) => {
+          if (res.code != -1) {
             this.getlist();
-            this.$message.success('操作成功')
+            this.$message.success("操作成功");
           }
         });
       }
@@ -382,10 +475,12 @@ export default {
       if (this.form.id == undefined) {
         this.$message.warning("请选择操作的数据");
       } else {
-        putapi(`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=2`).then((res) => {
-          if(res.code!=-1){
+        putapi(
+          `/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=2`
+        ).then((res) => {
+          if (res.code != -1) {
             this.getlist();
-            this.$message.success('操作成功')
+            this.$message.success("操作成功");
           }
         });
       }
@@ -400,15 +495,15 @@ export default {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
-          cancelButtonClass:"difference",
-        confirmButtonClass:"commonbutton"
+          cancelButtonClass: "difference",
+          confirmButtonClass: "commonbutton",
         })
           .then(() => {
             deletapi(`/api/app/common-char/${this.form.id}`).then((res) => {
-              if(res.code!=-1){
+              if (res.code != -1) {
                 this.form = {};
                 this.getlist();
-                this.$message.success('删除成功')
+                this.$message.success("删除成功");
               }
             });
           })
@@ -424,7 +519,7 @@ export default {
         this.title = 2;
         this.dialogVisible = true;
         getapi(`/api/app/common-char/${this.form.id}`).then((res) => {
-          if(res.code!=-1){
+          if (res.code != -1) {
             this.form = res.data;
           }
         });
@@ -434,12 +529,15 @@ export default {
     addoredit() {
       if (this.title == 1) {
         if (this.form.displayName != undefined) {
-          postapi("/api/app/common-char",{ displayName: this.form.displayName,commonCharTypeId:this.form.commonCharTypeId }).then((res) => {
+          postapi("/api/app/common-char", {
+            displayName: this.form.displayName,
+            commonCharTypeId: this.form.commonCharTypeId,
+          }).then((res) => {
             // this.form.displayName = "";
-            if(res.code!=-1){
+            if (res.code != -1) {
               this.getlist();
               this.dialogVisible = false;
-              this.$message.success('新增成功')
+              this.$message.success("新增成功");
             }
           });
         } else if (this.form.displayName == undefined) {
@@ -447,15 +545,16 @@ export default {
         }
       } else if (this.title == 2) {
         if (this.form.displayName != "") {
-          putapi(`/api/app/common-char/${this.form.id}`, { displayName: this.form.displayName,commonCharTypeId:this.form.commonCharTypeId }).then(
-            (res) => {
-             if(res.code!=-1){
-               this.getlist();
-               this.dialogVisible = false;
-               this.$message.success('修改成功')
-             }
+          putapi(`/api/app/common-char/${this.form.id}`, {
+            displayName: this.form.displayName,
+            commonCharTypeId: this.form.commonCharTypeId,
+          }).then((res) => {
+            if (res.code != -1) {
+              this.getlist();
+              this.dialogVisible = false;
+              this.$message.success("修改成功");
             }
-          );
+          });
         } else if (this.form.displayName == "") {
           this.$message.warning("请输入名称");
         }
@@ -465,18 +564,20 @@ export default {
     add() {
       this.dialogVisible = true;
       this.title = 1;
-      this.form = {};
+      Object.assign(this.$data.form, this.$options.data().form);
+      this.form.commonCharTypeId = this.commonCharTypeId;
       this.$nextTick(() => {
         this.$refs.refinput.focus();
       });
     },
     //
     getlist() {
-      getapi("/api/app/common-char/in-filter").then((res) => {
-        if(res.code!=-1){
-          this.initTableData = [...res.data.items];
-          this.tableData = res.data.items;
-          // this.quckDepartment=[...res.data.items]
+      postapi("/api/app/CommonChar/GetCommonCharList",{
+        commonCharTypeId:this.commonCharTypeId
+      }).then((res) => {
+        if (res.code != -1) {
+         this.initTableData = [...res.data];
+          this.tableData = res.data;
         }
       });
     },