数据字典

pages/basicData/dic/components/add.vue

+<template>
+  <Form ref="form" :model="entity" :rules="rules" :label-width="100">
+    <Row class="rowTitle100">
+      <FormItem label="类别" prop="typeId">
+        <RadioGroup v-model="entity.typeId">
+          <Radio :label="0" disabled>系统</Radio>
+          <Radio :label="1" disabled>分类</Radio>
+          <Radio :label="2" disabled>字典</Radio>
+          <Radio :label="3" disabled>字典项</Radio>
+        </RadioGroup>
+      </FormItem>
+    </Row>
+    <Row class="rowTitle100">
+      <FormItem label="名称" prop="name">
+        <Input v-model="entity.name">
+          <ColorPicker
+            v-model="entity.color"
+            slot="prepend"
+            transfer
+            size="small"
+            transfer
+            recommend
+          />
+        </Input>
+      </FormItem>
+    </Row>
+    <Row class="rowTitle100">
+      <FormItem label="编码" prop="code">
+        <Input v-model="entity.code" />
+      </FormItem>
+    </Row>
+    <Row class="rowTitle100">
+      <FormItem label="图标" prop="icon">
+        <InputIcon v-model="entity.icon"></InputIcon>
+      </FormItem>
+    </Row>
+    <FormItem label="状态" prop="number">
+      <RadioGroup v-model="entity.status">
+        <Radio :label="0">启用</Radio>
+        <Radio :label="1">禁用（名称和值可以启用或禁用，但不能删除）</Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem label="锁定" prop="number">
+      <RadioGroup v-model="entity.isStatic">
+        <Radio :label="0">不锁定</Radio>
+        <Radio :label="1">锁定（锁定后不可改变名称和值，不能删除）</Radio>
+      </RadioGroup>
+    </FormItem>
+    <Row class="rowTitle100">
+      <FormItem label="描述" prop="description">
+        <Input v-model="entity.description" type="textarea" :rows="3"></Input>
+      </FormItem>
+    </Row>
+    <FormItem>
+      <Button type="primary" @click="handleSubmit">保存</Button>
+      <Button @click="handleClose" class="ml20">取消</Button>
+      <div>
+          {{v}}
+      </div>
+    </FormItem>
+  </Form>
+</template>
+<script>
+import api from "../api.js";
+export default {
+  name: "Edit",
+  data() {
+    return {
+      entity: {
+        upId: 0,
+        typeId: this.v.typeId,
+        status: 0,
+        isStatic: 0,
+        priority:0,
+        color:"",
+
+      },
+      rules: {
+        name: [{ required: true, message: "必填", trigger: "blur" }],
+        code: [{ required: true, message: "必填", trigger: "blur" }],
+      },
+    };
+  },
+  props: ["v"],
+  mounted() {
+    if (this.v.id) {
+      this.entity.typeId = this.v.typeId + 1;
+      this.entity.upId = this.v.id;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((v) => {
+        if (v) {
+          api.save(this.entity).then((r) => {
+            console.warn(r);
+            if (r.success) {
+              this.$Message.success("添加成功");
+              this.$emit("on-ok");
+            }
+          });
+        }
+      });
+    },
+    handleClose() {
+      this.$emit("on-close");
+    },
+  },
+  watch: {
+   
+  },
+};
+</script>

pages/basicData/dic/components/edit.vue

@@ -55,7 +55,9 @@ export default {
   name: 'Edit',
   data() {
     return {
-      entity: this.v,
+      entity: {
+        color:""
+      },
       rules: {
         name: [{ required: true, message: '必填', trigger: 'blur' }],
         code: [{ required: true, message: '必填', trigger: 'blur' }]
@@ -65,6 +67,13 @@ export default {
   props: {
     v: Object
   },
+  mounted(){
+    this.entity = this.v
+      if(!this.entity.color){
+        this.entity.color="";
+      }
+    
+  },
   methods: {
     handleSubmit() {
       this.$refs.form.validate((v) => {
@@ -86,6 +95,9 @@ export default {
   watch: {
     v(v) {
       this.entity = this.v
+      if(!this.entity.color){
+        this.entity.color="";
+      }
       console.info(this.entity)
     }
   }

pages/basicData/dic/index.vue

 <template>
   <Layout class="full">
-    <Sider hide-trigger :style="{background: '#fff'}" class="menu" width="240">
+    <Sider
+      hide-trigger
+      :style="{ background: '#fff' }"
+      class="menu"
+      width="240"
+    >
       <h3 class="title">
         数据字典
         <ButtonGroup class="fr" size="small">
+          <Button icon="md-add" title="新增顶级" @click="add(0)"></Button>
           <Button>
             <Icon
-              :type="expand?'md-arrow-dropright':'md-arrow-dropdown'"
+              :type="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
               size="16"
               @click="toggle"
               title="展开/合并"
@@ -18,22 +24,48 @@
         </ButtonGroup>
       </h3>
       <div>
-        <Input v-model.trim="keys" search placeholder="请输入名称/编码" clearable />
+        <Input
+          v-model.trim="keys"
+          search
+          placeholder="请输入名称/编码"
+          clearable
+        />
         <Tree
           :data="projectList"
           @on-select-change="change"
           class="tree-i"
           :render="renderContent"
         />
+        <Dropdown
+          transfer
+          ref="contentMenu"
+          style="display: none"
+          trigger="click"
+          placement="right-start"
+        >
+          <DropdownMenu slot="list" ref="ppp" style="min-width: 80px">
+            <DropdownItem @click.native="add">
+              <a>添加</a>
+            </DropdownItem>
+            <DropdownItem name="edit" @click.native="editRight">
+              <a>修改</a>
+            </DropdownItem>
+            <!-- <DropdownItem name="del" @click.native="removeNew">
+              <a>删除</a>
+            </DropdownItem> -->
+          </DropdownMenu>
+        </Dropdown>
       </div>
     </Sider>
     <Content class="content">
       <Tools>
-        <Breadcrumb style="display:inline-block">
-          <BreadcrumbItem v-for="(li,i) in names" :key="i">{{li}}</BreadcrumbItem>
+        <Breadcrumb style="display: inline-block">
+          <BreadcrumbItem v-for="(li, i) in names" :key="i">{{
+            li
+          }}</BreadcrumbItem>
         </Breadcrumb>
         <template slot="btns">
-          <span class="mr20" v-if="node.typeId==2">
+          <span class="mr20" v-if="node.typeId == 2">
             索引：
             <a
               data-clipboard-action="copy"
@@ -41,7 +73,8 @@
               @click="copy"
               id="code"
               class="tag-read"
-            >{{node.code}}</a>
+              >{{ node.code }}</a
+            >
           </span>
           <Button type="default" @click="setRoot">返回顶级</Button>
         </template>
@@ -53,12 +86,16 @@
           border
           :columns="columns"
           :data="data"
-          :draggable="edit==-1"
+          :draggable="edit == -1"
           class="tableCommon"
           @on-drag-drop="onDragDrop"
         >
           <template slot-scope="{ row, index }" slot="typeId">
-            <state code="system.dictionary.typeId" type="text" :value="row.typeId"></state>
+            <state
+              code="system.dictionary.typeId"
+              type="text"
+              :value="row.typeId"
+            ></state>
           </template>
           <template slot-scope="{ row, index }" slot="status">
             <state code="status" type="tag" :value="row.status"></state>
@@ -67,16 +104,16 @@
             <state code="isStatic" type="tag" :value="row.isStatic"></state>
           </template>
           <template slot-scope="{ row, index }" slot="name">
-            <span v-if="edit!=index" v-text="row.name"></span>
+            <span v-if="edit != index" v-text="row.name"></span>
             <Input v-else type="text" v-model.trim="cur.name" />
           </template>
           <template slot-scope="{ row, index }" slot="color">
-            <div v-if="edit!=index">
+            <div v-if="edit != index">
               <ColorPicker
-                :value="row.color||''"
+                :value="row.color || ''"
                 transfer
                 recommend
-                @on-change="setColor($event,row,index)"
+                @on-change="setColor($event, row, index)"
               />
             </div>
             <div v-else>
@@ -85,17 +122,20 @@
           </template>
           <template slot-scope="{ row, index }" slot="icon">
             <div v-if="row.icon">
-              <Icon :type="row.icon" @on-change="setColor($event,row,index)" />
+              <Icon
+                :type="row.icon"
+                @on-change="setColor($event, row, index)"
+              />
             </div>
           </template>
           <template slot-scope="{ row, index }" slot="code">
-            <span v-if="edit!=index" v-text="row.code"></span>
+            <span v-if="edit != index" v-text="row.code"></span>
             <Input v-else type="text" v-model.trim="cur.code" />
           </template>
           <template slot-scope="{ row, index }" slot="action">
-            <div v-if="edit!=index" class="action">
-              <op class="edit" @click="editRow(row,index)">编辑</op>
-              <op class="remove" @click="delRow(row,index)">删除</op>
+            <div v-if="edit != index" class="action">
+              <op class="edit" @click="editRow(row, index)">编辑</op>
+              <!-- <op class="remove" @click="delRow(row, index)">删除</op> -->
             </div>
             <div class="action" v-else>
               <op class="edit" @click="save">保存</op>
@@ -103,35 +143,51 @@
             </div>
           </template>
         </Table>
-        <Button type="primary" :disabled="edit!=-1" long @click="addNew" class="mt10">添加</Button>
-        <Alert type="info" class="mt10" v-if="data.length>1&&edit==-1">提示： 支持拖拽排序，数据未保存时不可拖拽排序。</Alert>
+        <Button
+          type="primary"
+          :disabled="edit != -1"
+          long
+          @click="addNew"
+          class="mt10"
+          >添加</Button
+        >
+        <Alert type="info" class="mt10" v-if="data.length > 1 && edit == -1"
+          >提示： 支持拖拽排序，数据未保存时不可拖拽排序。</Alert
+        >
       </div>
       <Modal v-model="editModal" :title="editTitle" footer-hide>
-        <Edit :v="editModel" @on-close="editModal=false" @on-ok="editOk" />
+        <component :is="datail" :v="editModel" @on-close="editModal = false" @on-ok="editOk" />
       </Modal>
+     
     </Content>
   </Layout>
 </template>
 <script>
-import Edit from "./components/edit";
 import api from "./api.js";
 import Clipboard from "clipboard";
 const root = {
   id: 0,
   typeId: -1,
   title: "顶级节点",
-  code: ""
+  code: "",
 };
 export default {
   data() {
     return {
+      datail:null,
+      addTitle: "新增",
+      addModal: false,
       keys: "",
       treeHeight: "",
       code: "2",
       expand: false,
       editModal: false,
       editModel: {
-        color: ""
+        color: "",
+      },
+      nodeInfo: {
+        priority: null,
+        id: 0,
       },
       editTitle: "编辑",
       node: root,
@@ -147,64 +203,64 @@ export default {
         {
           type: "index",
           width: 60,
-          align: "center"
+          align: "center",
         },
         {
           title: "类别",
           key: "typeId",
           width: 100,
           align: "center",
-          slot: "typeId"
+          slot: "typeId",
         },
         {
           title: "颜色",
           key: "color",
           width: 100,
           align: "center",
-          slot: "color"
+          slot: "color",
         },
         {
           title: "名称",
           key: "name",
           width: 150,
-          slot: "name"
+          slot: "name",
         },
         {
           title: "编码",
           key: "code",
-          slot: "code"
+          slot: "code",
         },
         {
           title: "图标",
           key: "icon",
-          slot: "icon"
+          slot: "icon",
         },
         {
           title: "描述",
-          key: "description"
+          key: "description",
         },
         {
           title: "状态",
           key: "status",
           width: 100,
           align: "center",
-          slot: "status"
+          slot: "status",
         },
         {
           title: "锁定",
           key: "isStatic",
           width: 100,
           align: "center",
-          slot: "isStatic"
+          slot: "isStatic",
         },
         {
           title: "操作",
           key: "action",
           width: 160,
           align: "center",
-          slot: "action"
-        }
-      ]
+          slot: "action",
+        },
+      ],
     };
   },
   computed: {
@@ -214,7 +270,7 @@ export default {
       let items = this.tree;
       search(this.keys, items);
       function search(keys, data) {
-        data.map(u => {
+        data.map((u) => {
           if (keys.length == u.title) {
             result.push(u);
           } else {
@@ -235,9 +291,8 @@ export default {
         });
       }
       return result;
-    }
+    },
   },
-  components: { Edit },
   async fetch({ store, params }) {
     await store.dispatch("loadDictionary"); // 加载数据字典
   },
@@ -259,58 +314,115 @@ export default {
   },
   methods: {
     renderContent(h, { root, node, data }) {
-      console.log(data)
+      // console.log(data);
       return h(
         "span",
         [
-          h("Poptip", {
-            props: {
-              content: data.data.code,
-              trigger: "hover",
-              placement:"top-start"
-            },
-            style: {
-              cursor: "pointer",
-              color:data.data.status==1?'#ccc':'#515a6e'
-            }
-          },[
-
-            h('span',{
-
+          h(
+            "Poptip",
+            {
+              props: {
+                content: data.data.code,
+                trigger: "hover",
+                placement: "top-start",
+              },
+              style: {
+                cursor: "pointer",
+                color: data.data.status == 1 ? "#ccc" : "#515a6e",
+              },
             },
-             data.title
-            )
-          ])
-        ],
+            [
+              h("State",{props:{
+                value:data.data.typeId,
+                code:"aps.scheduling.groupingForm",
+                type:"tag"
+              }},data.data.typeId)
+              ,
+              h(
+                "span",
+                {
+                  on: {
+                    // click: () => {
+                    //   this.handleSelect(data); //手动选择树节点
+                    // },
+                    //右键点击事件
+                    contextmenu: (e) => {
+                      e.preventDefault();
+                      this.$refs.contentMenu.$refs.reference = event.target;
+                      this.$refs.contentMenu.currentVisible = !this.$refs
+                        .contentMenu.currentVisible;
+                      this.editModel = data.data;
+                      console.warn("addd",this.editModel)
+                    },
+                  },
+                },
+                data.title+" ["+data.data.typeId+"]"
+              ),
+            ]
+          ),
+        ]
 
         // data.title
       );
     },
     copy() {
       var clipboard = new Clipboard(".tag-read");
-      clipboard.on("success", e => {
+      clipboard.on("success", (e) => {
         this.$Message.success("复制成功:" + this.node.code);
         clipboard.destroy();
       });
-      clipboard.on("error", e => {
+      clipboard.on("error", (e) => {
         // 不支持复制
         console.log("该浏览器不支持自动复制"); // 释放内存
         clipboard.destroy();
       });
     },
+    editRight() {
+      this.editRow(this.nodeInfo);
+    },
     editRow(row, index) {
       this.editTitle = "编辑";
       this.editModal = true;
       this.editModel = row;
+      this.datail=()=>import("./components/edit");
     },
     toggle() {
       this.expand = !this.expand;
       this.loadTree();
     },
+    addOk() {
+      this.load();
+      this.loadTree();
+      this.addModal = false;
+      this.detail=null;
+    },
+    add(upId) {
+      if(upId==0){
+        this.editModel={
+          id:-1,
+        upId: this.node.id,
+        name: "",
+        code: "",
+        color: "",
+        status: 0,
+        isStatic: 0,
+        typeId: -1,
+        priority: this.edit,
+        }
+        // console.warn("VVVVVVVVVVVVVVVVV")
+      }
+      this.datail=()=>import("./components/add");
+      this.editModal = true;
+      
+    },
+
     editOk() {
       this.load();
       this.editModal = false;
     },
+    removeNew() {
+      this.delRow(this.nodeInfo);
+    },
     delRow(row, index) {
       var url = `${systemUrl}/Dictionary/Delete?id=${row.id}`;
       this.$Modal.confirm({
@@ -319,16 +431,16 @@ export default {
         onOk: () => {
           this.$api
             .delete(`${url}`)
-            .then(r => {
+            .then((r) => {
               if (r.success) {
                 this.$Message.success("删除成功");
                 this.load();
               }
             })
-            .catch(error => {
+            .catch((error) => {
               this.$Message.error("删除失败");
             });
-        }
+        },
       });
     },
     change(nodes, node) {
@@ -337,7 +449,7 @@ export default {
         id: node.id,
         typeId: node.data.typeId,
         title: node.title,
-        code: node.data.code
+        code: node.data.code,
       };
       // this.names = [node.title]
       let cur = node;
@@ -376,7 +488,7 @@ export default {
         var expand = this.expand;
         setParent(null, items);
         function setParent(parent, items) {
-          items.map(u => {
+          items.map((u) => {
             u.parent = parent;
             u.expand = expand;
             if (u.children) {
@@ -390,11 +502,11 @@ export default {
     onDragDrop(a, b) {
       this.data.splice(b, 1, ...this.data.splice(a, 1, this.data[b]));
       let ids = [];
-      this.data.map(u => {
+      this.data.map((u) => {
         ids.push(u.id);
       });
       if (ids.length > 1) {
-        api.setSort({ ids }).then(r => {
+        api.setSort({ ids }).then((r) => {
           if (!r.success) {
             this.$Message.error("排序失败");
             this.load();
@@ -402,6 +514,7 @@ export default {
         });
       }
     },
+
     addNew() {
       this.edit = this.data.length;
       this.cur = {
@@ -412,7 +525,7 @@ export default {
         status: 0,
         isStatic: 0,
         typeId: this.node.typeId + 1,
-        priority: this.edit
+        priority: this.edit,
       };
       this.data.push(this.cur);
     },
@@ -430,15 +543,15 @@ export default {
         this.$Message.error("值不能为空");
         return;
       }
-      api.save(this.cur).then(r => {
-        console.warn(r);
+      api.save(this.cur).then((r) => {
+        // console.warn(r);
         if (r.success) {
           this.$Message.success("添加成功");
           this.load();
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>