样式管理

Surpriseplus

2022-10-09 e3a7392259f08628e026d1e8aa468007c8ee1c82

样式管理

 src/api/api.js

@@ -91,3 +91,20 @@
  //请求地址
  return request.post('/version/updateVersion', params);
}

//样式管理请求列表
export function select_Style_ByPageAndCount(params) {
  return request.get('/Style/selectByPageAndCount', { params: params });
}
//样式管理添加
export function insertStyle(params) {
  return request.post('/Style/insertStyle', params);
}
//样式管理删除
export function deleteStyles(params) {
  return request.get('/Style/deleteStyles', { params: params });
}
//样式管理修改
export function updateStyle(params) {
  return request.post('/Style/updateStyle', params);
}

 src/assets/lang/en.js

@@ -17,6 +17,7 @@
    upload: 'Upload',
    preservation: 'Preservation',
    close: 'Close',
    see: 'See',
  },
  dataManage: {
    dataManage: 'Data Manage',
@@ -75,7 +76,29 @@
      modifySuccessfully: 'modify successfully',
      tipsUp: 'Are you sure to save the changes?',
    },
    styleManage: 'styleManage',
    styleManage: 'Style Manage',
    styleObj: {
      index: 'Index',
      name: 'Name',
      type: 'Type',
      dirid: 'Directory ID',
      depid: 'Unit ID',
      ver: 'Edition',
      status: 'State',
      precision: 'Accuracy',
      descr: 'Describe',
      fileguid: 'Style file ID',
      viewguid: 'Preview File ID',
      createUser: 'Creator ID',
      createTime: 'Creation Time',
      updateUser: 'Updater ID',
      updateTime: 'Update Time',
      bak: 'Remarks',
      deactivate: 'Stop Using',
      enable: 'Start Using',
      addStyleData: 'Add Style Data',
      deInformation: 'Detailed Information',
    },
  },
  operatManage: {
    operatManage: 'Operat Manage',

 src/assets/lang/zh.js

@@ -17,6 +17,7 @@
    upload: '上传',
    preservation: '保存',
    close: '关闭',
    see: '查看',
  },
  dataManage: {
    dataManage: '数据管理',
@@ -76,6 +77,29 @@
      tipsUp: '是否确定保存修改内容?',
    },
    styleManage: '样式管理',
    styleObj: {
      index: '序号',
      name: '名称',
      type: '类型',
      dirid: '目录ID',
      depid: '单位ID',
      ver: '版本',
      status: '状态',
      precision: '精度',
      descr: '描述',
      fileguid: '样式文件ID',
      viewguid: '预览文件ID',
      createUser: '创建人ID',
      createTime: '创建时间',
      updateUser: '更新人ID',
      updateTime: '更新时间',
      bak: '备注',
      deactivate: '停用',
      enable: '启用',
      addStyleData: '添加样式数据',

      deInformation: '详细信息',
    },
  },
  operatManage: {
    operatManage: '运维管理',

 src/store/index.js

@@ -9,6 +9,8 @@
    cataNode: {},
    verCateNode: {},
    verCateNodes: {},
    styleDirCateNodes: {},
    styleDepCateNodes: {},
  },
  mutations: {
    // èŽ·å–完整面包屑路径
@@ -25,6 +27,13 @@
    verChangeNodes(state, msg) {
      state.verCateNodes = msg;
    },
    //样式管理
    styleDepChangeNode(state, msg) {
      state.styleDepCateNodes = msg;
    },
    styleDirChangeNode(state, msg) {
      state.styleDirCateNodes = msg;
    },
  },
  actions: {},
  modules: {},

 src/views/datamanage/styleDepTree.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,354 @@
<template>
  <div class="wrap">
    <div class="bread">
      <el-breadcrumb separator="el-icon-arrow-right">
        <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="treeBox">
      <el-tree
        ref="tree"
        :props="defaultProps"
        node-key="id"
        :data="dirData"
        :expand-on-click-node="false"
        :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
        :draggable="draggable"
        @node-drag-start="handleDragStart"
        @node-click="handleNodeClick"
        @node-drop="handleDrop"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="btnBox" v-show="showEdit">
            <el-button type="text" size="mini" @click="() => append(data)">
              <i class="el-icon-circle-plus"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              <i class="el-icon-delete-solid"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
      <!-- <div style="margin-left:130px;">
        <el-button @click="sendChange">保存</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { selectdepTab } from '../../api/api';
export default {
  name: 'catalogueTree',
  props: ['showBtn'],
  data() {
    return {
      draggable: false,
      id: null,
      showEdit: false,
      showBread: false,
      oriData: [], //原始树数据
      dirData: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      breadList: [], //面包屑数组
      breadLabel: '', //面包屑文字
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    };
  },

  methods: {
    // è¯·æ±‚目录树
    async getDirTree() {
      this.selectData = [];
      const data = await selectdepTab();
      if (data.code != 200) {
        this.$message.error('下拉调用失败');
      } else {
        this.oriData = data.result;
        this.newData = data.result;
        this.dirData = this.treeData(data.result);
      }
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        // å±žäºŽåŒä¸€å¯¹è±¡é—®é¢˜ï¼Œä¾‹å¦‚：令 a=b、c=1 ï¼Œç„¶åŽå†ä»¤ b.c=c ï¼Œ é‚£ä¹ˆ a.c=b.c=c=1 ï¼›åŒç†ï¼ŒåŽç»­ä»¤ c.d=2 ,那么 a.c.d ä¹Ÿæ˜¯=2；
        // ç”±æ­¤å¾ªçŽ¯å¤šæ¬¡åŽï¼Œå°±èƒ½å½¢æˆç›¸åº”的树形数据结构
        return father.pid == 0; // è¿”回一级菜单
      });
    },
    append(data) {
      this.$prompt('请输入名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          const newChild = {
            id: this.id + 1,
            name: value,
            pid: data.id,
            // children: [],
            oid: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);

          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          });
        });
    },
    remove(node, data) {
      this.$confirm('此操作将删除该节点, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          let res = children.splice(index, 1);
          var std = [];
          for (var i in res) {
            std.push(res[i].id);
          }
          deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$store.commit('styleDepChangeNode', data);
      this.breadList = [];
      this.getTreeNode(this.$refs.tree.getNode(data.id));
    },
    getTreeNode(node) {
      if (node && node.label) {
        this.breadList.unshift(node.label);
        this.getTreeNode(node.parent); //递归
        this.breadLabel = this.breadList.join('>');
        this.$store.commit('changeCata', this.breadLabel);
      }
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //将备份的dir重新赋值
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("被拖拽节点", draggingNode);
      // console.log("进入的节点", dropNode);
      // console.log("放置位置", dropType);
      // console.log("事件", ev);
      // if (dropType !== "inner") {
      //   // 1.修改父节点pid
      //   draggingNode.data.pid = dropNode.data.pid;
      //   dropNode.parent.childNodes.forEach((item, index) => {
      //     // 2.修改自身顺序oid
      //     item.data.oid = index + 1;
      //   });
      // }
      // // console.log(draggingNode.data.id);
      // let res = this.oriData.filter((item) => item.id == draggingNode.data.id);
      // console.log(res);
      this.$confirm('此操作将保存目录更改, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let paramData = [];
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          let nodeData =
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          let pid = '';
          nodeData.forEach((item, i) => {
            if (dropType != 'inner') {
              if (draggingNode.data.pid === dropNode.data.pid) {
                pid = item.pid;
              } else {
                pid = dropNode.data.pid;
              }
            } else {
              pid = data.id;
            }
            let collection = {
              id: item.id,
              name: item.name,
              pid,
              oid: i + 1,
            };
            paramData.push(collection);
          });
          // console.log(paramData);
          let arr = [];
          this.oriData.forEach((e) => {
            paramData.forEach((item) => {
              if (item.id === e.id) {
                e = item;
              }
            });
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
          this.$message({
            type: 'success',
            message: '更改成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改',
          });
          this.dirData = this.old_dirDat; //将备份的dir重新赋值
        });
    },

    sendChange() {
      updateDirTree(this.newData).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '更新成功!',
          });
        }
      });
    },
  },
  mounted() {
    this.getDirTree();
    this.$bus.$on('clearTressLabel', (e) => {
      this.breadLabel = '';
    });
  },
  watch: {
    showBtn: {
      immediate: true,
      handler(val) {
        if (val) {
          this.showEdit = val;
          this.draggable = val;
        }
      },
    },
    showBread: {
      immediate: true,
      handler(val) {
        if (val) this.showBread = val;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 98.5%;
  height: 100%;

  .bread {
    width: 100%;
    height: 5%;
    margin: 0 auto;
    overflow: auto;
  }

  .treeBox {
    margin-top: 1%;
    width: 100%;
    height: 94%;
    overflow: auto;

    .el-tree {
      background: transparent;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;

      // /deep/ .el-tree-node__label {
      //   font-size: 18px;
      // }
      /deep/ .el-tree-node {
        padding-top: 10px;
        // padding-bottom: 10px;
      }

      /deep/ .el-tree-node:focus > .el-tree-node__content {
        background-color: #b9b9b9;
      }

      /deep/ .el-tree-node__content:hover {
        background-color: rgb(153, 153, 153);
      }

      .btnBox {
        margin-left: 5px;

        .el-button + .el-button {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>

 src/views/datamanage/styleDirTree.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,354 @@
<template>
  <div class="wrap">
    <div class="bread">
      <el-breadcrumb separator="el-icon-arrow-right">
        <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="treeBox">
      <el-tree
        ref="tree"
        :props="defaultProps"
        node-key="id"
        :data="dirData"
        :expand-on-click-node="false"
        :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
        :draggable="draggable"
        @node-drag-start="handleDragStart"
        @node-click="handleNodeClick"
        @node-drop="handleDrop"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="btnBox" v-show="showEdit">
            <el-button type="text" size="mini" @click="() => append(data)">
              <i class="el-icon-circle-plus"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              <i class="el-icon-delete-solid"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
      <!-- <div style="margin-left:130px;">
        <el-button @click="sendChange">保存</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { selectdirTab } from '../../api/api';
export default {
  name: 'catalogueTree',
  props: ['showBtn'],
  data() {
    return {
      draggable: false,
      id: null,
      showEdit: false,
      showBread: false,
      oriData: [], //原始树数据
      dirData: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      breadList: [], //面包屑数组
      breadLabel: '', //面包屑文字
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    };
  },

  methods: {
    // è¯·æ±‚目录树
    async getDirTree() {
      this.selectData = [];
      const data = await selectdirTab();
      if (data.code != 200) {
        this.$message.error('下拉调用失败');
      } else {
        this.oriData = data.result;
        this.newData = data.result;
        this.dirData = this.treeData(data.result);
      }
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        // å±žäºŽåŒä¸€å¯¹è±¡é—®é¢˜ï¼Œä¾‹å¦‚：令 a=b、c=1 ï¼Œç„¶åŽå†ä»¤ b.c=c ï¼Œ é‚£ä¹ˆ a.c=b.c=c=1 ï¼›åŒç†ï¼ŒåŽç»­ä»¤ c.d=2 ,那么 a.c.d ä¹Ÿæ˜¯=2；
        // ç”±æ­¤å¾ªçŽ¯å¤šæ¬¡åŽï¼Œå°±èƒ½å½¢æˆç›¸åº”的树形数据结构
        return father.pid == 0; // è¿”回一级菜单
      });
    },
    append(data) {
      this.$prompt('请输入名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          const newChild = {
            id: this.id + 1,
            name: value,
            pid: data.id,
            // children: [],
            oid: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);

          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          });
        });
    },
    remove(node, data) {
      this.$confirm('此操作将删除该节点, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          let res = children.splice(index, 1);
          var std = [];
          for (var i in res) {
            std.push(res[i].id);
          }
          deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$store.commit('styleDirChangeNode', data);
      this.breadList = [];
      this.getTreeNode(this.$refs.tree.getNode(data.id));
    },
    getTreeNode(node) {
      if (node && node.label) {
        this.breadList.unshift(node.label);
        this.getTreeNode(node.parent); //递归
        this.breadLabel = this.breadList.join('>');
        this.$store.commit('changeCata', this.breadLabel);
      }
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //将备份的dir重新赋值
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("被拖拽节点", draggingNode);
      // console.log("进入的节点", dropNode);
      // console.log("放置位置", dropType);
      // console.log("事件", ev);
      // if (dropType !== "inner") {
      //   // 1.修改父节点pid
      //   draggingNode.data.pid = dropNode.data.pid;
      //   dropNode.parent.childNodes.forEach((item, index) => {
      //     // 2.修改自身顺序oid
      //     item.data.oid = index + 1;
      //   });
      // }
      // // console.log(draggingNode.data.id);
      // let res = this.oriData.filter((item) => item.id == draggingNode.data.id);
      // console.log(res);
      this.$confirm('此操作将保存目录更改, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let paramData = [];
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          let nodeData =
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          let pid = '';
          nodeData.forEach((item, i) => {
            if (dropType != 'inner') {
              if (draggingNode.data.pid === dropNode.data.pid) {
                pid = item.pid;
              } else {
                pid = dropNode.data.pid;
              }
            } else {
              pid = data.id;
            }
            let collection = {
              id: item.id,
              name: item.name,
              pid,
              oid: i + 1,
            };
            paramData.push(collection);
          });
          // console.log(paramData);
          let arr = [];
          this.oriData.forEach((e) => {
            paramData.forEach((item) => {
              if (item.id === e.id) {
                e = item;
              }
            });
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
          this.$message({
            type: 'success',
            message: '更改成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改',
          });
          this.dirData = this.old_dirDat; //将备份的dir重新赋值
        });
    },

    sendChange() {
      updateDirTree(this.newData).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '更新成功!',
          });
        }
      });
    },
  },
  mounted() {
    this.getDirTree();
    this.$bus.$on('clearTressLabel', (e) => {
      this.breadLabel = '';
    });
  },
  watch: {
    showBtn: {
      immediate: true,
      handler(val) {
        if (val) {
          this.showEdit = val;
          this.draggable = val;
        }
      },
    },
    showBread: {
      immediate: true,
      handler(val) {
        if (val) this.showBread = val;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 98.5%;
  height: 100%;

  .bread {
    width: 100%;
    height: 5%;
    margin: 0 auto;
    overflow: auto;
  }

  .treeBox {
    margin-top: 1%;
    width: 100%;
    height: 94%;
    overflow: auto;

    .el-tree {
      background: transparent;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;

      // /deep/ .el-tree-node__label {
      //   font-size: 18px;
      // }
      /deep/ .el-tree-node {
        padding-top: 10px;
        // padding-bottom: 10px;
      }

      /deep/ .el-tree-node:focus > .el-tree-node__content {
        background-color: #b9b9b9;
      }

      /deep/ .el-tree-node__content:hover {
        background-color: rgb(153, 153, 153);
      }

      .btnBox {
        margin-left: 5px;

        .el-button + .el-button {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>

 src/views/datamanage/styleManage.vue

@@ -1,11 +1,19 @@
<template>
  <div class="authorityManagement_box">
    <My-bread :list="['数据管理', '样式管理']"></My-bread>
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.styleManage')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="searchComp">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
        <el-form-item label="关键字" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
          <el-input
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
@@ -13,28 +21,28 @@
            icon="el-icon-search"
            type="primary"
            size="small"
            >查询</el-button
            >{{ $t('common.iquery') }}</el-button
          >
          <el-button
            @click="resetForm('ruleForm')"
            icon="el-icon-refresh"
            type="info"
            size="small"
            >重置</el-button
            >{{ $t('common.empty') }}</el-button
          >
          <el-button
            @click="InsertFormdialog = true"
            icon="el-icon-edit"
            type="success"
            size="small"
            >新增</el-button
            >{{ $t('common.append') }}</el-button
          >
          <el-button
            @click="delStyleData"
            icon="el-icon-delete"
            type="danger"
            size="small"
            >删除</el-button
            >{{ $t('common.delete') }}</el-button
          >
        </el-form-item>
      </el-form>
@@ -44,61 +52,113 @@
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            fit
            height="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column width="50" type="index" label="序号" />
            <el-table-column min-width="70" prop="name" label="样式名称" />

            <!-- <el-table-column min-width="70" prop="path" label="存储目录" /> -->
            <el-table-column min-width="70" prop="type" label="类型" />
            <!-- <el-table-column min-width="70" prop="img" label="图片" /> -->
            <el-table-column
              min-width="150"
              prop="queryLevel"
              label="所属目录"
              align="center"
              type="index"
              :label="$t('dataManage.styleObj.index')"
              width="70px"
            />
            <el-table-column align="center" prop="id" v-if="false" />
            <el-table-column
              align="center"
              prop="name"
              :label="$t('dataManage.styleObj.name')"
            />
            <el-table-column
              min-width="100"
              prop="create_time"
              label="创建时间"
              align="center"
              prop="type"
              :label="$t('dataManage.styleObj.type')"
            />
            <el-table-column
              min-width="100"
              prop="create_user"
              label="创建人员"
              align="center"
              prop="dirName"
              :label="$t('dataManage.styleObj.dirid')"
            />
            <el-table-column min-width="100" prop="up_time" label="更新时间" />
            <el-table-column min-width="100" prop="up_user" label="更新人员" />
            <el-table-column min-width="70" prop="format" label="格式" />
            <el-table-column min-width="100" prop="up_unit" label="上传单位" />
            <el-table-column min-width="70" prop="status" label="状态" />
            <el-table-column min-width="70" prop="version" label="版本" />
            <el-table-column min-width="70" prop="accuracy" label="精度" />
            <el-table-column min-width="70" prop="remarks" label="备注" />
            <el-table-column min-width="100" label="操作">
            <el-table-column
              align="center"
              prop="depName"
              :label="$t('dataManage.styleObj.depid')"
            />
            <el-table-column
              align="center"
              prop="ver"
              :label="$t('dataManage.styleObj.ver')"
            />
            <el-table-column
              align="center"
              prop="status"
              :label="$t('dataManage.styleObj.status')"
              :formatter="formatStatus"
            />
            <el-table-column
              align="center"
              prop="precision"
              :label="$t('dataManage.styleObj.precision')"
            />
            <el-table-column
              align="center"
              prop="descr"
              :label="$t('dataManage.styleObj.descr')"
            />
            <el-table-column
              align="center"
              prop="fileGuid"
              :label="$t('dataManage.styleObj.fileguid')"
            />
            <el-table-column
              align="center"
              prop="viewGuid"
              :label="$t('dataManage.styleObj.viewguid')"
            />
            <el-table-column
              align="center"
              prop="createUser"
              :label="$t('dataManage.styleObj.createUser')"
            />
            <el-table-column
              align="center"
              prop="createTime"
              :label="$t('dataManage.styleObj.createTime')"
              :formatter="formatTime"
            />
            <el-table-column
              align="center"
              prop="updateUser"
              :label="$t('dataManage.styleObj.updateUser')"
            />
            <el-table-column
              align="center"
              prop="updateTime"
              :label="$t('dataManage.styleObj.updateTime')"
              :formatter="formatTime"
            />
            <el-table-column
              align="center"
              prop="bak"
              :label="$t('dataManage.styleObj.bak')"
            />
            <el-table-column min-width="150" :label="$t('common.operate')">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                <el-button
                  @click="showDetail(scope.$index, scope.row)"
                  >查看</el-link
                  type="primary"
                  plain
                  size="small"
                  >{{ $t('common.see') }}</el-button
                >
                <el-link
                  :underline="false"
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  style="margin-left: 10px"
                  >修改</el-link
                  type="warning"
                  plain
                  size="small"
                  >{{ $t('common.update') }}</el-button
                >
                <!-- <el-link
                  :underline="false"
                  @click="handleDelete(scope.$index, scope.row)"
                  style="margin-left: 10px"
                  >删除</el-link
                > -->
              </template>
            </el-table-column>
          </el-table>
@@ -110,9 +170,9 @@
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageNum"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
@@ -123,49 +183,84 @@
    <div class="infoBox" v-show="showinfoBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>详细信息</span>
          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>样式名称：{{ itemdetail.name }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.name') }}:</label>
            <label class="boxlabel">{{ itemdetail.name }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            æœåŠ¡åœ°å€ï¼š{{ itemdetail.path }}
            <el-link @click="ShowWindowFly(itemdetail.path)" :underline="false" type="primary"
              >详情</el-link
            >
           <p>
            <label> {{ $t('dataManage.styleObj.type') }}:</label>
            <label class="boxlabel">{{ itemdetail.type }}</label>
          </p>
          <el-divider></el-divider>、
          <p>类型：{{ itemdetail.type }}</p>

          </p>
          <el-divider></el-divider>
          <p>缩略图：<img id="showImg" src="" width="200px" height="100px" /></p>
          <p>
            <label> {{ $t('dataManage.styleObj.dirid') }}:</label>
            <label class="boxlabel">{{ itemdetail.dirName }}</label>
          </p>
          <el-divider></el-divider>
          <p>所属目录：{{ itemdetail.queryLevel }}</p>

           <p>
            <label> {{ $t('dataManage.styleObj.depid') }}:</label>
            <label class="boxlabel">{{ itemdetail.depName }}</label>
          </p>
          <el-divider></el-divider>

          <p>格式：{{ itemdetail.format }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.ver') }}:</label>
            <label class="boxlabel">{{ itemdetail.ver }}</label>
          </p>
          <el-divider></el-divider>
          <p>上传单位：{{ itemdetail.up_unit }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.status') }}:</label>
            <label class="boxlabel">{{ itemdetail.status }}</label>
          </p>
          <el-divider></el-divider>
          <p>状态：{{ itemdetail.status }}</p>
           <p>
            <label> {{ $t('dataManage.styleObj.descr') }}:</label>
            <label class="boxlabel">{{ itemdetail.descr }}</label>
          </p>
          <el-divider></el-divider>
          <p>版本：{{ itemdetail.version }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.fileguid') }}:</label>
            <label class="boxlabel">{{ itemdetail.fileguid }}</label>
          </p>
          <el-divider></el-divider>
          <p>精度：{{ itemdetail.accuracy }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.viewguid') }}:</label>
            <label class="boxlabel">{{ itemdetail.viewguid }}</label>
          </p>
          <el-divider></el-divider>
          <p>备注：{{ itemdetail.remarks }}</p>
          <p>
            <label> {{ $t('dataManage.styleObj.createUser') }}:</label>
            <label class="boxlabel">{{ itemdetail.createUser }}</label>
          </p>
          <el-divider></el-divider>
          <p>创建时间：{{ itemdetail.create_time }}</p>
         <p>
            <label> {{ $t('dataManage.styleObj.createTime') }}:</label>
            <label class="boxlabel">{{ itemdetail.createTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>创建人员：{{ itemdetail.create_user }}</p>
            <p>
            <label> {{ $t('dataManage.styleObj.updateUser') }}:</label>
            <label class="boxlabel">{{ itemdetail.updateUser }}</label>
          </p>
          <el-divider></el-divider>
          <p>更新时间：{{ itemdetail.create_time }}</p>
           <p>
            <label> {{ $t('dataManage.styleObj.updateTime') }}:</label>
            <label class="boxlabel">{{ itemdetail.updateTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>更新人员：{{ itemdetail.create_user }}</p>
           <p>
            <label> {{ $t('dataManage.styleObj.bak') }}:</label>
            <label class="boxlabel">{{ itemdetail.bak }}</label>
          </p>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
@@ -177,113 +272,107 @@
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="upform">
        <el-form-item label="样式名称" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.styleObj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="文件路径" :label-width="formLabelWidth">
          <input
            name="file1"
            :accept="'.fly,.ttf,.emp,.edp'"
            type="file"
            id="flyFile"
            multiple="multiple"
            style="display: none"
            @change="uploadflyFile"
          />
          <el-row>
            <el-col :span="22">
              <el-input v-model="upform.path" disabled class="firstInput"
            /></el-col>
            <el-col :span="2"
              ><el-link
                title="添加数据"
                :underline="false"
                @click="getflyFile"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="所属目录" :label-width="formLabelWidth">
          <el-row>
            <el-col :span="22">
              <el-input
                disabled
                style="display: none"
                v-model="upform.path_id"
                autocomplete="off"
              ></el-input>
              <el-tooltip
                :content="
                  upform.queryLevel == '' ? '未选择目录' : upform.queryLevel
                "
                placement="top-start"
              >
                <el-input
                  v-model="upform.queryLevel"
                  disabled
                  class="firstInput"
                />
              </el-tooltip>
            </el-col>
            <el-col :span="2">
              <el-link
                title="选择目录"
                :underline="false"
                @click="showCata = true"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.styleObj.type')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="格式" :label-width="formLabelWidth">
          <el-input v-model="upform.format" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.dirid')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="upform.dirValue"
            disabled
            autocomplete="off"
          ></el-input
          ><el-link
            :underline="false"
            @click="showDirTree(1)"
            style="margin-left: 10px"
            ><i class="el-icon-plus"></i
          ></el-link>
        </el-form-item>
        <el-form-item label="上传单位" :label-width="formLabelWidth">
          <el-input v-model="upform.up_unit" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.depid')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="upform.depValue"
            disabled
            autocomplete="off"
          ></el-input>
          <el-link
            :underline="false"
            @click="showDepTree(1)"
            style="margin-left: 10px"
            ><i class="el-icon-plus"></i
          ></el-link>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="upform.status" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.ver')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.ver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="版本" :label-width="formLabelWidth">
          <el-input v-model="upform.version" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.status')"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="upform.status"
            style="width: 745px"
            :placeholder="$t('common.choose')"
          >
            <el-option
              value="0"
              :label="$t('dataManage.styleObj.deactivate')"
            ></el-option>
            <el-option
              value="1"
              :label="$t('dataManage.styleObj.enable')"
            ></el-option>
          </el-select>
        </el-form-item>
       <el-form-item label="精度" :label-width="formLabelWidth">
          <el-input v-model="upform.accuracy" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.precision')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="upform.precision"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="upform.remarks" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.descr')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.descr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="缩略图" :label-width="formLabelWidth">
          <input
            name="file1"
            :accept="'.jpg,.png'"
            type="file"
            id="imageFile"
            multiple="multiple"
            style="display: none"
            @change="uploadFile"
          />
          <el-row>
            <el-col :span="22">
              <el-input v-model="upform.img" disabled class="firstInput"
            /></el-col>
            <el-col :span="2"
              ><el-link
                title="添加数据"
                :underline="false"
                @click="getImageFile"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        <el-form-item
          :label="$t('dataManage.styleObj.fileguid')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.fileGuid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.styleObj.viewguid')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.viewGuid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.styleObj.bak')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -292,200 +381,348 @@
      </div>
    </el-dialog>
    <el-dialog
      title="添加数据"
      top="5vh"
      :title="$t('dataManage.styleObj.addStyleData')"
      top="2vh"
      style="overflow: hidden"
      :visible.sync="InsertFormdialog"
    >
      <el-form :model="insertform">
        <el-form-item label="样式名称" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.styleObj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件路径" :label-width="formLabelWidth">
          <input
            name="file1"
            :accept="'.fly,.ttf,.emp,.edp'"
            type="file"
            id="flyFile"
            multiple="multiple"
            style="display: none"
            @change="uploadflyFile"
          />
          <el-row>
            <el-col :span="22">
              <el-input v-model="insertform.path" disabled class="firstInput"
            /></el-col>
            <el-col :span="2"
              ><el-link
                title="添加数据"
                :underline="false"
                @click="getflyFile"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="所属目录" :label-width="formLabelWidth">
          <el-row>
            <el-col :span="22">
              <el-input
                disabled
                style="display: none"
                v-model="insertform.path_id"
                autocomplete="off"
              ></el-input>
              <el-tooltip
                :content="
                  insertform.queryLevel == ''
                    ? '未选择目录'
                    : insertform.queryLevel
                "
                placement="top-start"
              >
                <el-input
                  v-model="insertform.queryLevel"
                  disabled
                  class="firstInput"
                />
              </el-tooltip>
            </el-col>
            <el-col :span="2">
              <el-link
                title="选择目录"
                :underline="false"
                @click="showCata = true"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.styleObj.type')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="格式" :label-width="formLabelWidth">
          <el-input v-model="insertform.format" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.dirid')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertform.dirValue"
            disabled
            autocomplete="off"
          ></el-input
          ><el-link
            :underline="false"
            @click="showDirTree(0)"
            style="margin-left: 10px"
            ><i class="el-icon-plus"></i
          ></el-link>
        </el-form-item>
        <el-form-item label="上传单位" :label-width="formLabelWidth">
          <el-input v-model="insertform.up_unit" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.depid')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertform.depValue"
            disabled
            autocomplete="off"
          ></el-input>
          <el-link
            :underline="false"
            @click="showDepTree(0)"
            style="margin-left: 10px"
            ><i class="el-icon-plus"></i
          ></el-link>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="insertform.status" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.ver')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.ver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="版本" :label-width="formLabelWidth">
          <el-input v-model="insertform.version" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.status')"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="insertform.status"
            style="width: 745px"
            :placeholder="$t('common.choose')"
          >
            <el-option
              value="0"
              :label="$t('dataManage.styleObj.deactivate')"
            ></el-option>
            <el-option
              value="1"
              :label="$t('dataManage.styleObj.enable')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="精度" :label-width="formLabelWidth">
          <el-input v-model="insertform.accuracy" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.precision')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertform.precision"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="insertform.remarks" autocomplete="off"></el-input>
        <el-form-item
          :label="$t('dataManage.styleObj.descr')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="缩略图" :label-width="formLabelWidth">
          <input
            name="file1"
            :accept="'.jpg,.png'"
            type="file"
            id="imageFile"
            multiple="multiple"
            style="display: none"
            @change="uploadFile"
          />
          <el-row>
            <el-col :span="22">
              <el-input v-model="insertform.img" disabled class="firstInput"
            /></el-col>
            <el-col :span="2"
              ><el-link
                title="添加数据"
                :underline="false"
                @click="getImageFile"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row>
        <el-form-item
          :label="$t('dataManage.styleObj.fileguid')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.fileGuid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.styleObj.viewguid')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.viewGuid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.styleObj.bak')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="InsertFormdialog = false">取 æ¶ˆ</el-button>
        <el-button @click="insertFromDataClose">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="insertFromData">ç¡® å®š</el-button>
      </div>
    </el-dialog>
    <div class="leftTree" v-show="showCata">
      <div class="treeBox"><catalogueTree></catalogueTree></div>
    <div class="leftTree" v-if="showDirCata">
      <div class="treeBox">
        <style-dir-tree></style-dir-tree>
      </div>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="selectCataName"
          >确定</el-button
        >
        <el-button type="primary" size="small" @click="showCata = false"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="selectDirCataName">{{
          $t('common.confirm')
        }}</el-button>
        <el-button type="primary" size="small" @click="showDirCata = false">{{
          $t('common.close')
        }}</el-button>
      </div>
    </div>
    <div class="leftTree" v-if="showDepCata">
      <div class="treeBox">
        <style-dep-tree></style-dep-tree>
      </div>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="selectDepCataName">{{
          $t('common.confirm')
        }}</el-button>
        <el-button type="primary" size="small" @click="showDepCata = false">{{
          $t('common.close')
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import $ from 'jquery';
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import styleDirTree from './styleDirTree.vue';
import styleDepTree from './styleDepTree.vue';
import {
  StyleQuery,
  StyleCounnt,
  DeletestStyle,
  InsertStyle,
  UpdateStyle,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
import catalogueTree from "../../components/catalogueTree.vue";
  select_Style_ByPageAndCount,
  insertStyle,
  deleteStyles,
  updateStyle
} from '../../api/api';
export default {
  name: "styleManage",
  components: { MyBread, catalogueTree },
  name: 'styleManage',
  components: { MyBread, styleDirTree, styleDepTree },
  data() {
    return {
      dialogFormVisible: false,
      InsertFormdialog: false,
      showCata: false,
      upform: {},
      formLabelWidth: "100px",
      formLabelWidth: '130px',
      showinfoBox: false,
      itemdetail: {},
      ruleForm: {
        name: "",
        name: '',
      },
      tableData: [],
      insertform: {
        img: "",
        path: "",
      },

      backupData: [],
      currentPage1: 0,
      pageSize: 1,
      pageNum: 10,
      count: 0,
      searchName: "",

      searchName: '',
      multipleSelection: [],
      upflag: false,
      /** */
      showDirCata: false,
      showDepCata: false,
      tableData: [],
      insertform: {},
      dirFlag: null,
      depFlag: null,
      count: 0,
      listData: {
        name: null,
        depName: null,
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.startFromData();
    this.getRoleTabelData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      this.listData.pageSize = val;
      this.getRoleTabelData();
    },
    handleCurrentChange(val) {
      this.listData.pageIndex = val;
      this.getRoleTabelData();
    },
    async delStyleData() {
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      const data = await deleteStyles({ ids: std.toString() });
      if (data.code == 200) {
        this.$message({
          message: '删除成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '删除失败！',
          type: 'warning',
        });
      }
    },
    showDirTree(res) {
      this.dirFlag = res;
      this.showDirCata = true;
    },
    showDepTree(res) {
      this.depFlag = res;
      this.showDepCata = true;
    },
    selectDepCataName() {
      this.showDepCata = false;
      console.log(this.depFlag)
      switch (this.depFlag) {
        case 0:
          // var data = this.$store.state.styleDirCateNodes;
          this.insertform.depValue = this.$store.state.styleDepCateNodes.name;
          this.insertform.depid = this.$store.state.styleDepCateNodes.id;
          break;
        case 1:
          this.upform.depValue = this.$store.state.styleDepCateNodes.name;
          this.upform.depid = this.$store.state.styleDepCateNodes.id;
          break;
      }
    },
    selectDirCataName() {
      this.showDirCata = false;
      switch (this.dirFlag) {
        case 0:
          // var data = this.$store.state.styleDirCateNodes;
          this.insertform.dirValue = this.$store.state.styleDirCateNodes.name;
          this.insertform.dirid = this.$store.state.styleDirCateNodes.id;
          break;
        case 1:
          this.upform.dirValue = this.$store.state.styleDirCateNodes.name;
          this.upform.dirid = this.$store.state.styleDirCateNodes.id;
          break;
      }
    },
    insertFromDataClose() {
      this.InsertFormdialog = false;
      this.insertform = {};
    },
    async insertFromData() {
      if (this.insertform.dirid == null || this.insertform.depid == null) {
        this.$message({
          message: '请选择样式所属的目录或单位',
          type: 'warning',
        });
        return;
      }
      const data = await insertStyle(this.insertform);
      if (data.code == 200) {
        this.InsertFormdialog = false;
        this.insertform = {};
        this.$message({
          message: '添加成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '添加失败！',
          type: 'warning',
        });
      }
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
        delete this.listData.tab;
      }
      const data = await select_Style_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      this.tableData = data.result;
      this.count = data.count;
    },
    formatTime(row, column) {
      let date = row[column.property];
      return this.formomentTime(date);
    },
    formomentTime(date) {
      if (date === undefined || date === null) {
        return;
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
    },
    formatStatus(row, column) {
      let date = row[column.property];
      if (date === undefined || date === null) {
        return '';
      }
      switch (date) {
        case 1:
          return '启用';
          break;
        case 0:
          return '停用';
          break;
      }
    },
    /** */
    getflyFile() {
      $("#flyFile").click();
      $('#flyFile').click();
    },
    getImageFile() {
      $("#imageFile").click();
      $('#imageFile').click();
    },
    uploadflyFile() {
      var val = document.getElementById("flyFile").files;
      var val = document.getElementById('flyFile').files;
      if (!val || !val.length) return;
      if (!val || !val.length) return;
      var formData = new FormData();
      formData.append("file0", val[0]);
      var res = $.ajax(serverUrl + "Style/Upload", {
        type: "post",
      formData.append('file0', val[0]);
      var res = $.ajax(serverUrl + 'Style/Upload', {
        type: 'post',
        data: formData,
        async: false,
        cache: false,
@@ -507,12 +744,12 @@
    },
    //图片上传
    uploadFile() {
      var val = document.getElementById("imageFile").files;
      var val = document.getElementById('imageFile').files;
      if (!val || !val.length) return;
      var formData = new FormData();
      formData.append("file0", val[0]);
      var res = $.ajax(serverUrl + "Style/Upload", {
        type: "post",
      formData.append('file0', val[0]);
      var res = $.ajax(serverUrl + 'Style/Upload', {
        type: 'post',
        data: formData,
        async: false,
        cache: false,
@@ -541,8 +778,8 @@
        this.insertform.path_id = this.$store.state.cataNode.id;
      }

      this.$store.commit("changeCata", ""); //清空state的面包屑
      this.$store.commit("changeNode", ""); //清空state的节点对象
      this.$store.commit('changeCata', ''); //清空state的面包屑
      this.$store.commit('changeNode', ''); //清空state的节点对象
      this.showCata = false;
    },
    startFromData() {
@@ -552,19 +789,10 @@
      this.getStyleData(this.pageNum, this.pageSize, this.searchName);
      this.getStyleDataCount(this.searchName);
    },
    insertFromData() {
      this.InsertFormdialog = false;
      InsertStyle(this.insertform).then((res) => {});
      this.insertform = {
        img: "",
        path: "",
      };
      this.startFromData();
    },

    // è¯·æ±‚数据
    getStyleData(size, index, name) {
      StyleQuery(size, index, name).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
@@ -575,35 +803,39 @@
      });
    },
    addstyle() {
      this.$router.push("/addstyle");
      this.$router.push('/addstyle');
    },
    updateForm() {
      var that = this;
      this.$confirm("是否保存修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dialogFormVisible = false;
          this.upflag = false;
          UpdateStyle(that.upform).then((res) => {
            that.startFromData();
          });

          this.$message({
            message: "修改成功",
            type: "success",
          });
        })
        .catch(() => {
          that.upflag = false;
   async updateForm() {
  if (this.upform.dirid == null || this.upform.depid == null) {
        this.$message({
          message: '请选择样式所属的目录或单位',
          type: 'warning',
        });
        return;
      }
      const data = await updateStyle(this.upform);
      if (data.code == 200) {
        this.dialogFormVisible = false;
        this.upform = {};
        this.$message({
          message: '修改成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
        });
      }


    },

    removeUpdate() {
      this.upflag = false;
      this.dialogFormVisible = false;
      this.upform={}
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
@@ -611,26 +843,18 @@
          this.searchName = this.ruleForm.name.trim();
          this.startFromData();
        } else {
          console.log("error submit!!");
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.tableData = this.backupData;
      this.$refs[formName].resetFields();
      this.searchName = "";
      this.startFromData();
    },
    showDetail(index, row) {
      console.log(index, row);
      var value = serverUrl + row.img;

      var img = document.getElementById("showImg");

      img.setAttribute("src", value);
      this.showinfoBox = true;
      this.itemdetail = row;
      this.itemdetail.createTime = this.formomentTime(this.itemdetail.createTime);
      this.itemdetail.updateTime = this.formomentTime(this.itemdetail.updateTime);
    },
    closeDetial() {
      this.showinfoBox = false;
@@ -638,65 +862,36 @@
    },

    handleEdit(index, row) {

      this.upflag = true;
      this.dialogFormVisible = true;
      this.upform = row;
      this.upform.depValue = row.depName;
      this.upform.dirValue = row.dirName;
    },
    handleDelete(index, row) {
      this.$confirm("确定是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('确定是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeletestStyle([row.id]);
          this.$message({
            type: "success",
            message: "删除成功!",
            type: 'success',
            message: '删除成功!',
          });
          this.startFromData();
        })
        .catch(() => {});
        .catch(() => { });
    },
    // èŽ·å–多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delStyleData() {
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      this.$confirm("确定是否删除所选内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeletestStyle(std);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.startFromData();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.getStyleData(this.pageNum, 1, this.searchName);
      this.getStyleDataCount(this.searchName);
    },
    handleCurrentChange(val) {
      this.pageSize = val;
      this.getStyleData(this.pageNum, this.pageSize, this.searchName);
      this.getStyleDataCount(this.searchName);
    },

    ShowWindowFly(res) {
      window.open(
        ifreamUrl+"/LFWeb/poper.html?name="+res,
        "",
        "height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
        ifreamUrl + '/LFWeb/poper.html?name=' + res,
        '',
        'height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'
      );
    },
  },
@@ -714,6 +909,7 @@
  .el-input {
    width: 745px;
  }

  .searchComp {
    margin: 10px auto;
    background: #fff;
@@ -731,7 +927,7 @@
    z-index: 10;
    z-index: 9999;
    top: 100px;
    left: 600px;
    left: 800px;
    width: 400px;
    height: 600px;
    background: #f0f2f5;
@@ -761,53 +957,53 @@
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        .el-table {
          height: 100%;
          // overflow: auto;
        }
        .el-table /deep/ .el-table__header-wrapper tr th {
          background-color: rgb(255, 255, 255) !important;
          color: rgb(0, 0, 0);
        }
        // ä¿®æ”¹æ¯è¡Œæ ·å¼ï¼š
        .el-table /deep/ .el-table__row {
          background-color: rgba(255, 255, 255) !important;
          color: rgb(0, 0, 0);
        }
        .el-table /deep/ .el-table__body tr.current-row > td {
          background-color: rgb(211, 211, 211) !important;
        }
        .el-table /deep/ .el-table__body tr:hover > td {
          background-color: rgb(211, 211, 211) !important;
        }
        // ä¿®æ”¹è¡¨æ ¼æ¯è¡Œè¾¹æ¡†çš„样式：
        .el-table /deep/ td,
        .el-table /deep/ th.is-leaf {
          border-bottom: 1px solid #eee;
          border-right: 1px solid #eee;
        }
        .el-table /deep/ .el-table__cell {
          padding: 0;
        }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        .el-table /deep/ .el-table__header tr,
        .el-table /deep/ .el-table__header th {
          height: 40px;
        }
        .el-table__body tr,
        .el-table__body td {
          height: 40px;
          padding: 0;
        }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š
        // .el-table {
        //   height: 100%;
        //   // overflow: auto;
        // }
        // .el-table /deep/ .el-table__header-wrapper tr th {
        //   background-color: rgb(255, 255, 255) !important;
        //   color: rgb(0, 0, 0);
        // }
        // // ä¿®æ”¹æ¯è¡Œæ ·å¼ï¼š
        // .el-table /deep/ .el-table__row {
        //   background-color: rgba(255, 255, 255) !important;
        //   color: rgb(0, 0, 0);
        // }
        // .el-table /deep/ .el-table__body tr.current-row > td {
        //   background-color: rgb(211, 211, 211) !important;
        // }
        // .el-table /deep/ .el-table__body tr:hover > td {
        //   background-color: rgb(211, 211, 211) !important;
        // }
        // // ä¿®æ”¹è¡¨æ ¼æ¯è¡Œè¾¹æ¡†çš„样式：
        // .el-table /deep/ td,
        // .el-table /deep/ th.is-leaf {
        //   border-bottom: 1px solid #eee;
        //   border-right: 1px solid #eee;
        // }
        // .el-table /deep/ .el-table__cell {
        //   padding: 0;
        // }
        // // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        // .el-table /deep/ .el-table__header tr,
        // .el-table /deep/ .el-table__header th {
        //   height: 40px;
        // }
        // .el-table__body tr,
        // .el-table__body td {
        //   height: 40px;
        //   padding: 0;
        // }
        // // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š

        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .el-table::before {
          height: 0;
        }
        // .el-table--border::after,
        // .el-table--group::after {
        //   width: 0;
        // }
        // .el-table::before {
        //   height: 0;
        // }
        //   a {
        //     color: #000;
        //   }
@@ -838,7 +1034,60 @@
        // margin-bottom: 10px;
        font-size: 14px;
      }
      .boxlabel {
        margin-left: 10px;
      }
    }
    /* æ•´ä½“样式 */
    .contentBox::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    /* æ»šåŠ¨æ¡ */
    .contentBox::-webkit-scrollbar-thumb {
      background-color: #b3d8ff;
      border-radius: 6px;
    }

    /* æ»šåŠ¨æ¡é¼ æ ‡ç»è¿‡æ ·å¼ */
    .contentBox::-webkit-scrollbar-thumb:hover {
      background-color: #b3d8ff;
      border-radius: 6px;
    }

    /* æ»šåŠ¨æ¡è½¨é“ */
    .contentBox::-webkit-scrollbar-track-piece {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ededed;
    }
  }
}
</style>
<style>
/* æ•´ä½“样式 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* æ»šåŠ¨æ¡ */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #b3d8ff;
  border-radius: 6px;
}

/* æ»šåŠ¨æ¡é¼ æ ‡ç»è¿‡æ ·å¼ */
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #66b1ff;
  border-radius: 8px;
}

/* æ»šåŠ¨æ¡è½¨é“ */
.el-table__body-wrapper::-webkit-scrollbar-track-piece {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>

 src/views/datamanage/versionManage.vue

@@ -307,9 +307,8 @@

      this.listData.name = this.ruleForm.name;
      this.listData.depName = this.$store.state.verCateNode.name;
      console.log(this.listData);
      const data = await select_Ver_ByPageAndCount(this.listData);
      console.log(data);

      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }