From b07a29b8af3c8ece56baed051e2874cf068e93a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Sat, 22 Oct 2022 14:44:09 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E5=AD=97=E5=85=B8=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css            |  10 +-
 src/bg-ui/bg-filter-group.vue       |  14 +-
 src/bg-ui/bg-switch-ele.vue         |  54 +++
 src/bg-ui/bg-switch.vue             |   6 +-
 src/bg-ui/bg-table-btns-more.vue    |  69 ++++
 src/bg-ui/bg-table-btns.vue         |  91 +++++
 src/bg-ui/index.js                  |   4 +
 src/bg-ui/index.scss                |  88 ++++-
 src/page/main/config/dict/index.vue | 514 +++++++++++++++++++++++-----
 9 files changed, 730 insertions(+), 120 deletions(-)
 create mode 100644 src/bg-ui/bg-switch-ele.vue
 create mode 100644 src/bg-ui/bg-table-btns-more.vue
 create mode 100644 src/bg-ui/bg-table-btns.vue

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 36305e5..8deab1d 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -274,8 +274,8 @@ div {
 }
 
 .el-dialog__body {
-  font-size: 18px;
-  color: #242c43;
+  font-size: 16px;
+  color: #404a62;
   text-align: center;
   padding: 0 16px;
 }
@@ -285,12 +285,6 @@ div {
 .dialog_box .el-dialog__footer {
   padding: 16px;
 }
-.result_box .el-dialog__body {
-  padding: 0px;
-}
-.sold_up_dialog .el-dialog__body {
-  padding: 24px 24px 4px;
-}
 /* 设置tab切换的样式 */
 .el-tabs__item.is-disabled {
   color: #8890a7 !important;
diff --git a/src/bg-ui/bg-filter-group.vue b/src/bg-ui/bg-filter-group.vue
index 3e38179..ba07db9 100644
--- a/src/bg-ui/bg-filter-group.vue
+++ b/src/bg-ui/bg-filter-group.vue
@@ -5,7 +5,7 @@
         <slot name="left_action"></slot>
       </div>
       <div class="right-filter">
-        <el-input :placeholder="placeholder" v-model="modelValue">
+        <el-input :placeholder="placeholder" v-model="value">
           <template #append>
             <div class="append-btn" @click="search">
               <bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
@@ -32,7 +32,7 @@ import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
   
 const state = reactive({
   showFlag: false,
-  modelValue: ""
+  value: ""
 })
 
 const props = defineProps({
@@ -47,20 +47,20 @@ const props = defineProps({
 })
 
 watch(props,(n,o) => {
-  state.modelValue = n.modelValue
+  state.value = n.modelValue
 })
-watch(() => state.modelValue,(n,o) => {
+watch(() => state.value,(n,o) => {
   emit('update:modelValue',n)
 })
 const emit = defineEmits(['search','update:modelValue'])
 const search = () => {
-  emit('search',state.modelValue)
+  emit('search',state.value)
 }
 const moreFilter = () => {
   state.showFlag = !state.showFlag
 }
 onMounted(() => {
-  state.modelValue = props.modelValue
+  state.value = props.modelValue
 })
-const { modelValue,showFlag } = toRefs(state)
+const { value,showFlag } = toRefs(state)
 </script>
\ No newline at end of file
diff --git a/src/bg-ui/bg-switch-ele.vue b/src/bg-ui/bg-switch-ele.vue
new file mode 100644
index 0000000..1646344
--- /dev/null
+++ b/src/bg-ui/bg-switch-ele.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-switch
+    class="bg-switch-ele"
+    v-model="value"
+    :active-value="1"
+    :inactive-value="0"
+    inline-prompt
+    :active-text="activeText"
+    :inactive-text="inactiveText"
+    @change="changeState"
+  />
+</template>
+
+<script setup>
+import { onMounted, reactive, toRefs, watch } from "vue"
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  activeText: {
+    type: String,
+    default: "是",
+  },
+  inactiveText: {
+    type: String,
+    default: "否"
+  },
+  rowId: {
+    type: Number,
+    default: null
+  }
+})
+const state = reactive({
+  value: 1
+})
+const emit = defineEmits(['changeState'])
+const changeState = () => {
+  if (props.rowId) {
+    let params = {
+      state: state.value,
+      id: props.rowId
+    }
+    emit('changeState',params)
+  }else {
+    emit('changeState',state.value)
+  }
+}
+onMounted(()=> {
+  state.value = props.modelValue
+})
+const { value } = toRefs(state)
+</script>
diff --git a/src/bg-ui/bg-switch.vue b/src/bg-ui/bg-switch.vue
index 62c03cd..5578a31 100644
--- a/src/bg-ui/bg-switch.vue
+++ b/src/bg-ui/bg-switch.vue
@@ -58,24 +58,22 @@ export default {
     },
     now_style() {
       return {
-        color: this.colors[this.now_index],
         borderColor: this.colors[this.now_index],
+        backgroundColor: this.colors[this.now_index],
       };
     },
     now_label_style() {
       return this.now_index == 0
         ? { left: this.circle_height + this.gap + 5 + "px" }
-        : { left: "10px" };
+        : { left: "6px" };
     },
     now_circle_style() {
       return this.now_index == 0
         ? {
             left: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
           }
         : {
             right: this.gap + "px",
-            backgroundColor: this.colors[this.now_index],
           };
     },
   },
diff --git a/src/bg-ui/bg-table-btns-more.vue b/src/bg-ui/bg-table-btns-more.vue
new file mode 100644
index 0000000..c24d3e1
--- /dev/null
+++ b/src/bg-ui/bg-table-btns-more.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="bg-table-btns-more" :style="style" @click.stop>
+    <bg-table-btn
+      v-for="(item, index) in operations"
+      :key="index"
+      :disabled="isDisabled(item)"
+      @click="clickAction(item)"
+    >
+      {{ getName(item) }}
+    </bg-table-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BgTableBtnsMore",
+  props: {
+    operations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      style: {},
+    };
+  },
+  methods: {
+    isDisabled({ disabled }) {
+      if (typeof disabled === "function") {
+        return disabled();
+      } else if (typeof disabled === "boolean") {
+        return disabled;
+      } else if (typeof disabled === "undefined") {
+        return false;
+      } else {
+        return !!disabled;
+      }
+    },
+    clickAction({ callback }) {
+      typeof callback === "function" && callback();
+    },
+    getName({ name }) {
+      if (typeof name === "function") {
+        return name();
+      } else {
+        return name;
+      }
+    },
+    upStyle() {
+      let { top, right } = this.$parent.$el.getBoundingClientRect();
+      let { width } = window.document.body.getBoundingClientRect();
+
+      this.style = {
+        position: "fixed",
+        top: `${top + 16}px`,
+        right: `${width - right - 16}px`,
+      };
+    },
+  },
+  mounted() {
+    document.body.append(this.$el);
+    this.upStyle();
+  },
+  beforeDestroy() {
+    this.$el && this.$el.remove();
+  },
+};
+</script>
diff --git a/src/bg-ui/bg-table-btns.vue b/src/bg-ui/bg-table-btns.vue
new file mode 100644
index 0000000..2849bda
--- /dev/null
+++ b/src/bg-ui/bg-table-btns.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="bg-table-btns">
+    <bg-table-btn
+      v-for="(item, index) in curOperations"
+      :key="index"
+      :disabled="isDisabled(item)"
+      @click="clickAction(item)"
+    >
+      {{ getName(item) }}
+    </bg-table-btn>
+    <a
+      class="bg-table-btn"
+      @mouseenter="showMOreBtns"
+      @mouseleave="hideMoreBtns"
+      v-if="otherOperations.length > 0"
+    >
+      <!-- <i class="el-icon-more" /> -->
+      <bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
+      <bg-table-btns-more
+        :operations="otherOperations"
+        @mouseenter="showMOreBtns"
+        @mouseleave="hideMoreBtns"
+        v-if="showMore"
+      />
+    </a>
+  </div>
+</template>
+
+<script>
+import BgTableBtnsMore from "./bg-table-btns-more.vue";
+
+export default {
+  name: "BgTableBtns",
+  components: { BgTableBtnsMore },
+  props: {
+    operations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showMore: false,
+      timer: null,
+    };
+  },
+  computed: {
+    curOperations() {
+      return this.operations.slice(0, this.operations.length > 3 ? 2 : 3);
+    },
+    otherOperations() {
+      return this.operations.slice(2, this.operations.length);
+    },
+  },
+  methods: {
+    isDisabled({ disabled }) {
+      if (typeof disabled === "function") {
+        return disabled();
+      } else if (typeof disabled === "boolean") {
+        return disabled;
+      } else if (typeof disabled === "undefined") {
+        return false;
+      } else {
+        return !!disabled;
+      }
+    },
+    clickAction({ callback }) {
+      typeof callback === "function" && callback();
+    },
+    getName({ name }) {
+      if (typeof name === "function") {
+        return name();
+      } else {
+        return name;
+      }
+    },
+    showMOreBtns() {
+      if (this.timer) clearTimeout(this.timer);
+
+      this.showMore = true;
+    },
+    hideMoreBtns() {
+      if (this.timer) clearTimeout(this.timer);
+
+      this.timer = setTimeout(() => {
+        this.showMore = false;
+      }, 50);
+    },
+  },
+};
+</script>
diff --git a/src/bg-ui/index.js b/src/bg-ui/index.js
index 3c997ea..7b487be 100644
--- a/src/bg-ui/index.js
+++ b/src/bg-ui/index.js
@@ -33,6 +33,8 @@
  import BgPagination from './bg-pagination.vue'
  import BgInnerTabs from './bg-inner-tabs.vue'
  import BgFilterGroup from './bg-filter-group.vue'
+ import BgSwitchEle from './bg-switch-ele.vue'
+ import BgTableBtns from './bg-table-btns.vue'
  
 const components = {
   BgIcon,//字体图标
@@ -67,6 +69,8 @@ const components = {
   BgPagination,// 分页组件
   BgInnerTabs,//内部tab
   BgFilterGroup,//高级搜索
+  BgSwitchEle,
+  BgTableBtns,
 };
 
 const install = (Vue) => {
diff --git a/src/bg-ui/index.scss b/src/bg-ui/index.scss
index d6a458c..c51a51f 100644
--- a/src/bg-ui/index.scss
+++ b/src/bg-ui/index.scss
@@ -659,11 +659,11 @@ a {
   }
   th,
   td {
-    padding: 12px 0!important;
+    padding: 11px 0!important;
     > .cell {
       padding: 0 10px !important;
       color: #404a62;
-      line-height: 18px;
+      line-height: 14px;
     }
   }
 
@@ -2036,29 +2036,31 @@ a {
 .bg-switch {
   display: inline-block;
   vertical-align: middle;
-  width: 64px;
-  height: 28px;
-  border-radius: 14px;
-  border: solid 2px #275a9d;
+  width: 44px;
+  height: 20px;
+  border-radius: 10px;
+  border: solid 2px #2b4695;
   position: relative;
-  color: #275a9d;
+  color: #fff;
+  background-color: #2b4695;
   cursor: pointer;
   user-select: none;
 
   > .label {
     font-size: 12px;
-    font-weight: 600;
-    line-height: 24px;
+    font-weight: 400;
+    line-height: 15px;
     position: absolute;
+    color: #fff;
   }
 
   > .circle {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     position: absolute;
-    top: 3px;
-    background-color: #275a9d;
+    // top: 2px;
+    background-color: #fff;
   }
 
   &.disabled {
@@ -2471,4 +2473,64 @@ a {
     border: 1px solid #e6e9ef;
     padding: 24px 16px 8px;
   }
+}
+// 表格操作按钮组
+.bg-table-btns {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bg-table-btns-more {
+  position: absolute;
+  top: 28px;
+  right: -16px;
+  z-index: 19;
+  padding: 4px 0;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
+  border-radius: 4px;
+  border: solid 1px #e6e9ef;
+  width: 88px;
+
+  .bg-table-btn {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    display: block;
+    padding: 0 16px;
+    margin: 0;
+    color: #202531;
+    line-height: 34px;
+    padding-left: 16px;
+    &:hover {
+      background-color: #f2f3f7;
+      color: #202531;
+    }
+    
+    &.disabled {
+      color: #a9b1c7;
+    }
+    &::before {
+      display: none;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+}
+
+.bg-switch-ele {
+  width: 44px;
+  height: 20px;
+  .el-switch__core {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/page/main/config/dict/index.vue b/src/page/main/config/dict/index.vue
index 43118a3..37c7355 100644
--- a/src/page/main/config/dict/index.vue
+++ b/src/page/main/config/dict/index.vue
@@ -9,11 +9,11 @@
     <div class="flex_row">
       <div class="flex_left">
         <div class="box">
-          <el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
+          <el-input class="type-input" v-model="typeKeyword" @input="searchType" placeholder="请输入内容"></el-input>
           
           <div class="type_station bg-scroll">
-            <div class="type-box" :class="{'current-type':nodeId==item.id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
-              {{item.name}}
+            <div class="type-box" :class="{'current-type':nodeClassifyId==item.classify_id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
+              {{item.classify_name}}
             </div>
           </div>
         </div>
@@ -57,19 +57,21 @@
           </bg-filter-group>
           <div class="table_container">
             <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
-              <template v-slot:state="{ row }">
-                {{ ["-","启用","禁用"][row.state] }}
-              </template>
               <template v-slot:updated_time="{ row }">
                 {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
               </template>
+              <template v-slot:state="{ row }">
+                <bg-switch-ele 
+                  v-model="row.state"
+                  :rowId="row.id"
+                  inline-prompt
+                  activeText="是"
+                  inactiveText="否"
+                  @changeState="changeUseRow"
+                />
+              </template>
               <template v-slot:action="{ row }">
-                <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1">
-                  编辑
-                </bg-table-btn>
-                <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1">
-                  删除
-                </bg-table-btn>
+                <bg-table-btns :operations="getOperations(row)" />
               </template>
             </bg-table>
             <bg-pagination
@@ -84,40 +86,97 @@
         </div>
       </div>
     </div>
+    <!-- 新建/编辑弹窗 -->
+    <el-dialog
+      custom-class="dialog_box"
+      :title=" addType == 1 ? '新建' : '编辑'"
+      v-model="addDialog"
+      width="758px"
+      :before-close="
+        () => {
+          addDialog = false;
+        }
+      "
+    >
+      <el-form
+        ref="bgForm"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+        class="bg_form"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input
+            v-model="formData.name"
+            placeholder="请输入名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="描述" prop="describe">
+          <el-input
+            v-model="formData.describe"
+            type="textarea"
+            :autosize="{ minRows: 5 }"
+            show-word-limit
+            maxlength="200"
+            resize="vertical"
+            placeholder="请输入描述"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
+          <el-switch
+            class="bg-switch-ele"
+            v-model="formData.state"
+            :active-value="1"
+            :inactive-value="0"
+            inline-prompt
+            active-text="是"
+            inactive-text="否"
+          />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="addDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addConfirm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 删除弹窗 -->
+    <el-dialog
+      custom-class="dialog_box"
+      title="提示"
+      v-model="dialogDelete"
+      width="400px"
+      :before-close="
+        () => {
+          dialogDelete = false;
+        }
+      "
+    >
+      <div>确定要删除此字典值吗？</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
+          <el-button type="primary" @click="deleteData">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref,onBeforeMount,toRefs,computed,watch  } from 'vue'
+import { reactive, ref,onBeforeMount,toRefs,computed, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import axios from '../../../../request/http.js'
+const bgForm = ref(null)
 const state = reactive({
-  typeList: [
-    {
-      name: "业务分类",
-      id: 1,
-    },
-    {
-      name: "业务领域",
-      id: 2,
-    },
-    {
-      name: "开放程度",
-      id: 3,
-    },
-    {
-      name: "开发厂商",
-      id: 4,
-    },
-    {
-      name: "菜单分组",
-      id: 5,
-    },
-  ],
-  search: "",
-  nodeId: null,
-  timer: null,
+  bgForm,
+  typeList: [], // 分类数据
+  typeKeyword: "", // 分类删选关键词
+  nodeClassifyId: null, // 当前选中分类的uuid  用于新建字典
+  nodeId: null, // 当前选中分类的id  用于请求列表
+  timer: null, // 定时器
   headers: [
     {
       label: "业务分类名称",
@@ -126,38 +185,32 @@ const state = reactive({
     {
       label: "描述",
       prop: "describe",
-    },
-    {
-      label: "状态",
-      prop: "state",
+      minWidth: 360
     },
     {
       label: "更新时间",
       prop: "updated_time",
+      width: 220,
+    },
+    {
+      label: "状态",
+      prop: "state",
     },
     {
       label: "操作",
       prop: "action",
-      width: 260,
+      width: 176,
       fixed: "right",
     },
-  ],
-  tableRows: [
-    {
-      name: "www",
-      describe: "sajdashkjdhsdjfkhsadjkfhkjsdahfkjashdkfjhsdjkafhkjsdhfkjshjkdfhajkhsdjkf",
-      state: 1,
-      updated_time: "2022-10-12 12:12:12"
-    },
-  ],
-  tableTotal: 0,
+  ], // 表格数据表头
+  tableRows: [], // 表格数据
+  tableTotal: 0, // 表格数据条数
   filter: {
     state: "",
     search: "",
     page: 1,
     limit: 10,
-    kind: "business_type",
-  },
+  }, // 表格筛选项
   stateOptions: [
     {
       name: "全部",
@@ -171,11 +224,43 @@ const state = reactive({
       name: "禁用",
       value: "2"
     },
-  ],
+  ], // 启用禁用
+  actionRow: null, // 当前操作的数据
+  dialogDelete: false, // 删除弹窗
+  addType: 0, // 
+  addDialog: false,
+  formData: {
+    name: "",
+    describe: "",
+    state: 1,
+  },
+  rules: {
+    name: [
+      { required: true, message: "请输入名称", trigger: "blur" },
+      { max: 20, message: "名称最大为20字", trigger: "blur"}
+    ],
+    describe: [
+      { required: true, message: "请输入描述", trigger: "blur" },
+      { max: 200, message: "描述最大为200字", trigger: "blur"}
+    ],
+    state: [
+      { required: true, message: "请选择是否启用", trigger: "change" }
+    ]
+  },
 })
+
 const nodeClick = (item) => {
   state.nodeId = item.id
-}
+  state.nodeClassifyId = item.classify_id
+  state.filter = {
+    state: "",
+    search: "",
+    page: 1,
+    limit: 10,
+  }
+  getTableRows()
+} // 切换字典分类
+
 const searchType = () => {
   if (state.timer) {
     clearTimeout(state.timer);
@@ -183,29 +268,74 @@ const searchType = () => {
   state.timer = setTimeout(() => {  
     getTypeList()
   }, 500);
-}
+} // 字典分类筛选
+
 const getTypeList = () => {
-  console.log(state.search)
-}
+  axios
+    .get(`/apaas/system/v5/dictionary/classify/list?name=${state.typeKeyword}`)
+    .then( (res) => {
+      if (res.data.code == 200) {
+        state.typeList = res.data.data || []
+        state.nodeClassifyId = state.typeList[0].classify_id || null
+        state.nodeId = state.typeList[0].id || null
+        if (state.nodeId) {
+          getTableRows()
+        }
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    }).catch((err) => {
+      console.log(err)
+    })
+} // 获取字典分类
+
 const changeSearch = (val) => {
   state.filter.search = val
-  console.log(state.filter)
-}
+  changePage(1)
+} // 表格关键字筛选
+
 const filterAction = () => {
-  console.log(state.filter)
-}
+  changePage(1)
+} // 查询按钮
+
 const filterClear = () => {
   state.filter = {
     state: "",
     search: "",
     limit: 10,
     page: 1,
-    kind: "business_type",
   }
-  console.log(state.filter)
-}
+  changePage(1)
+} // 重置筛选项
+
+const  getOperations = (row) => {
+  return [
+    {
+      name: "编辑",
+      callback: () => edit_row(row),
+      disabled: row.state == 1,
+    },
+    {
+      name: "删除",
+      callback: () => delete_row(row),
+      disabled: row.state == 1,
+    },
+    {
+      name: "上移",
+      callback: () => moveRow(row,1),
+      disabled: !row.canMoveUp,
+    },
+    {
+      name: "下移",
+      callback: () => moveRow(row,2),
+      disabled: !row.canMoveDown,
+    },
+  ];
+} // 表格操作按钮
+
 const getTableRows = () => {
   let params = {...state.filter}
+  params.id = state.nodeId
   axios
     .get(
       `/apaas/system/v5/dictionary/list`,
@@ -217,39 +347,213 @@ const getTableRows = () => {
       if (res.data.code == 200) {
         state.tableRows = res.data.data || []
         state.tableTotal = res.data.total
+        if (state.tableRows.length > 0) {
+          state.tableRows.forEach(e => {
+            e.canMoveUp = true
+            e.canMoveDown = true
+          })
+          state.tableRows[0].canMoveUp = false
+          state.tableRows[state.tableRows.length - 1].canMoveDown = false
+        }
       }else {
-        ElMessage.error(res.data.msg)
+        ElMessage.error(res.data.data)
       }
     })
-} // 获取数据
-const changePage = () => {
+} // 获取表格数据
 
-}
-const changeSize = () => {
+const changeUseRow = (row) => {
+  axios
+    .put(`/apaas/system/v5/dictionary/state?id=${row.id}&state=${row.state}`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        changePage(1)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+} // 启用禁用
+
+const changePage = (page) => {
+  state.filter.page = page
+  getTableRows()
+} // 改变页码
+
+const changeSize = (size) => {
+  state.filter.limit = size
+  changePage(1)
+} // 改变每页条数
 
-}
 const register = () => {
+  state.formData = {
+    name: "",
+    describe: "",
+    state: 1,
+  }
+  if (state.bgForm) {
+    nextTick().then(() => {
+      state.bgForm.validate(valid => {
+        if (!valid) {
+          state.bgForm.clearValidate()
+        }
+      })
+    })
+  }
+  state.addType = 1
+  state.addDialog = true
+} // 新建字典按钮
 
-}
 const edit_row = (row) => {
+  axios
+    .get(`/apaas/system/v5/dictionary/${row.id}`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.actionRow = res.data.data
+        state.formData = {
+          name: state.actionRow.name,
+          describe: state.actionRow.describe,
+          state: state.actionRow.state
+        }
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    }).catch((err) => {
+      console.log(err)
+    })
+    if (state.bgForm) {
+      nextTick().then(() => {
+        state.bgForm.validate(valid => {
+          if (!valid) {
+            state.bgForm.clearValidate()
+          }
+        })
+      })
+    }
+    state.addType = 2
+    state.addDialog = true
+} // 编辑按钮
+
+const addConfirm = () => {
+  state.bgForm.validate(valid => {
+    if (valid) {
+      if (state.addType == 1) { // 新增
+        let params = {
+          classify_id: state.nodeClassifyId,
+          ...state.formData
+        }
+        axios
+          .post(`/apaas/system/v5/dictionary/add`,params)
+          .then((res) => {
+            if (res.data.code == 200) {
+              ElMessage.success(res.data.data)
+              state.tableRows = []
+              state.addDialog = false
+              changePage(1)
+            }else {
+              ElMessage.error(res.data.data)
+            }
+          })
+      }else { // 编辑
+        let params = {
+          id: state.actionRow.id,
+          ...state.formData
+        }
+        axios
+          .put(`/apaas/system/v5/dictionary/update`,params)
+          .then((res) => {
+            if (res.data.code == 200) {
+              ElMessage.success(res.data.data)
+              state.tableRows = []
+              state.addDialog = false
+              changePage(1)
+            }else {
+              ElMessage.error(res.data.data)
+            }
+          })
+      }
+    }
+  })
+} // 确定新增/编辑
 
-}
 const delete_row = (row) => {
+  state.dialogDelete = true
+  state.actionRow = row
+} // 删除按钮
+
+const deleteData = () => {
+  axios
+    .delete(
+      `/apaas/system/v5/dictionary/${state.actionRow.id}`
+    )
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        state.dialogDelete = false
+        state.tableRows = []
+        changePage(1)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+} // 确定删除
 
+const moveRow = (row,type) => {
+  let index
+  state.tableRows.forEach((e,i) => {
+    if (e.id == row.id) {
+      index = i
+    }
+  })
+  let nextRow
+  if (type == 1) { // 上移
+    nextRow = state.tableRows[index - 1]
+  }else { // 下移
+    nextRow = state.tableRows[index + 1]
+  }
+  let params = [
+    {
+      id: row.id,
+      sort: nextRow.sort
+    },
+    {
+      id: nextRow.id,
+      sort: row.sort
+    }
+  ]
+  // axios
+  //   .put(``,[...params])
+  //   .then((res) => {
+  //     if (res.data.code == 200) {
+  //       ElMessage.success(res.data.data)
+  //       state.tableRows = []
+  //       changePage(1)
+  //     }else {
+  //       ElMessage.error(res.data.data)
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     console.log(err)
+  //   })
 }
-onBeforeMount(() => {
- state.nodeId = 1
 
+onBeforeMount(() => {
+ getTypeList()
 })
+
 const {
   typeList,
-  search,
-  nodeId,
+  typeKeyword,
+  nodeClassifyId,
   headers,
   tableRows,
   tableTotal,
   filter,
   stateOptions,
+  dialogDelete,
+  addType, 
+  addDialog,
+  formData,
+  rules,
 } = toRefs(state)
   
 
@@ -274,7 +578,7 @@ const {
     position: relative;
     height: calc(100% - 62px);
     .flex_left {
-      width: 280px;
+      width: 240px;
       background-color: #fff;
       margin-right: 16px;
       border-radius: 6px;
@@ -285,29 +589,27 @@ const {
       overflow: hidden;
       
       .box {
-        width: 248px;
+        width: 208px;
         height: 100%;
         overflow: hidden;
         .type_station {
           width: 100%;
           margin-top: 16px;
           height: calc(100% - 50px);
-          // overflow: hidden;
           .type-box {
             height: 32px;
             line-height: 32px;
-            padding-left: 38px;
+            text-align: center;
             font-size: 14px;
             color: #404a62;
             cursor: pointer;
-            &:hover { 
-              color: #3759be;
-              background-color: #dfe5f6;
+            &:hover {
+              background-color: #f2f3f7;
             }
           }
           .current-type{
-            color: #3759be;
-            background-color: #dfe5f6;
+            background-color: #f2f3f7;
+            border-radius: 4px;
           }
         }
       }
@@ -341,6 +643,42 @@ const {
     }
   }
   
+    .bg_form {
+      width: 100%;
+      box-sizing: border-box;
+      .el-form-item {
+        margin-bottom: 24px;
+        :deep().el-form-item__label {
+          line-height: 36px;
+          height: 36px;
+        }
+        .el-form-item__content {
+          width: 100%;
+          .el-textarea {
+            :deep().el-input__count {
+              bottom: -16px;
+              right: 4px;
+              font-family: Roboto-Regular;
+              color: #a9b1c7;
+            }
+          }
+          .bg-switch-ele {
+            width: 52px;
+            height: 24px;
+            :deep().el-switch__core {
+              width: 100%;
+              height: 24px;
+              .el-switch__inner,
+              .el-switch__action {
+                top: 3px;
+              }
+            }
+          }
+        }
+      }
+    
+  }
+  
 }
 
 </style>
\ No newline at end of file
-- 
2.26.0