UA 整理提交 准备修改标签

he wei

2022-09-27 23786b9ef2dc1d9f06dd7d9458e926369aab8c25

 src/components/contextMenu.vue

@@ -15,7 +15,7 @@
          :key="'main_' + idx"
        >
          <div
            :class="['title', {disabled: item.disabled}]"
            :class="['title', { disabled: item.disabled }]"
            @click="itemClick(item)"
            @mouseenter="itemHover(item)"
          >
@@ -26,7 +26,7 @@
            v-show="item.visible && item.children && item.children.length"
          >
            <li
              :class="['sub-li', {disabled: subItem.disabled}]"
              :class="['sub-li', { disabled: subItem.disabled }]"
              v-for="(subItem, index) in item.children"
              :key="'sub_' + index"
              @click="itemClick(subItem)"
@@ -37,10 +37,50 @@
        </li>
      </ul>
    </div>
    <!--  -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      append-to-body
      width="30%"
    >
      <el-input v-model="stationName" placeholder="请输入..."></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="stationNameOk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 文件属性 -->
    <el-dialog
      title="属性"
      class="file-info"
      :visible.sync="fileInfoVisible"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="800px"
    >
      <file-info
        :info="fileData"
        @ok="editOk"
        @cancel="editCancel"
        @quit="quit"
      ></file-info>
    </el-dialog>
  </div>
</template>

<script>
import FileInfo from "@/components/fileInfo";
import {
  addStation,
  addFileInStation,
  updateStation,
  deleteStation,
  delFileFromStation,
  getXmlValue,
} from "@/apis";
export default {
  name: "ContextMenu",
  model: {
@@ -57,6 +97,12 @@
      type: Array,
      default() {
        return [];
      },
    },
    contextData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
@@ -78,13 +124,13 @@
          {
            id: 11,
            title: "新建根文件",
            // method: "openFile",
            method: "addRootStation",
            disabled: false,
          },
          {
            id: 12,
            title: "新建子文件",
            // method: "openFile",
            method: "addSubStation",
            disabled: false,
          },
        ],
@@ -98,11 +144,13 @@
          {
            id: 13,
            title: "指定目录下所有文件",
            method: "selectDir",
            disabled: false,
          },
          {
            id: 14,
            title: "单一文件",
            method: "selectFile",
            disabled: false,
          },
        ],
@@ -110,34 +158,51 @@
      {
        id: 3,
        title: "重命名",
        method: "openFile",
        method: "rename",
        disabled: false,
        visible: false,
      },
      {
        id: 4,
        title: "删除",
        method: "openFile",
        method: "deleteItem",
        disabled: false,
        visible: false,
      },
    ];
    return {
      menuList,
      dialogTitle: "",
      dialogVisible: false,
      stationName: "",
      // 操作类型 'rename', 'add'
      type: "",
      fileInfoVisible: false,
      fileData: {},
      currFile: {
        name: "",
        url: "",
      },
    };
  },
  components: {},
  components: {
    FileInfo,
  },
  watch: {
    visible(n) {
      if(n) {
      if (n) {
        this.initData();
      }
    }
    },
  },
  methods: {
    itemClick(obj) {
      // console.log(obj)
      if (obj.method && "function" == typeof this[obj.method] && !obj.disabled) {
      if (
        obj.method &&
        "function" == typeof this[obj.method] &&
        !obj.disabled
      ) {
        this.close();
        this[obj.method](obj);
      }
@@ -167,16 +232,44 @@
      });
    },
    openFile() {
      // console.log("openfile");
      window.api.send("open-file-dialog");
      let { url } = this.contextData;
      const params = {
        filePath: url,
      };
      getXmlValue(params).then((res) => {
        const { code, data, data2 } = res.data;
        if (code && data) {
          console.log(data2);
          this.fileData = data2.fileParam;
          this.currFile.name = data2.fileName;
          this.currFile.url = data2.fileUrl;
          this.fileInfoVisible = true;
          // this.$router.push({
          //   path: "/result/" + data2.fileName,
          //   query: {
          //     url: data2.fileUrl,
          //   },
          // });
          // this.$bus.$emit("checkScroll");
        } else {
          this.$message.error("文件解析失败");
        }
      });
    },
    initEvents() {
      window.api.receive("selected-file", (path) => {
        console.log(path.filePaths);
        // this.path = path.filePaths;
      window.api.receive("selected-file", (path, data) => {
        if (data && data == "ContextMenu") {
          console.log(path.filePaths, "contextMenu?");
          path = path.filePaths[0];
          this.addFileInStation(path);
        }
      });
      window.api.receive("selected-directory", (path) => {
        console.log(path.filePaths);
      window.api.receive("selected-directory", (path, data) => {
        if (data && data == "ContextMenu") {
          // console.log(path.filePaths);
          path = path.filePaths[0];
          this.addFileInStation(path);
        }
      });
    },
    initData() {
@@ -187,7 +280,209 @@
          item.disabled = this.disabledList.some((val) => val == item.id);
        });
      });
      console.log(this.menuList, this.disabledList, 9090)
      console.log(this.menuList, this.disabledList, 9090);
    },
    addRootStation() {
      this.dialogTitle = "新建根文件名称";
      this.stationName = "";
      this.type = "add";
      this.dialogVisible = true;
    },
    addSubStation() {
      this.dialogTitle = "新建子文件名称";
      this.stationName = "";
      this.type = "add";
      this.dialogVisible = true;
    },
    stationNameOk() {
      if ("" == this.stationName.trim()) {
        this.$message.error("名称不能为空");
        return false;
      }
      if (this.type == "add") {
        this.addStation();
      } else if (this.type == "rename") {
        this.renameOk();
      }
    },
    addStation() {
      const { label, parent, level } = this.contextData;
      let params = {};
      const stationName = this.stationName.trim();
      switch (level) {
        case 0:
          params["stationName1"] = label;
          params["stationName2"] = stationName;
          break;
        case 1:
          params["stationName1"] = parent[0];
          params["stationName2"] = label;
          params["stationName3"] = stationName;
          break;
        default:
          params["stationName1"] = stationName;
      }
      addStation(params).then((res) => {
        const { code, data } = res.data;
        if (code && data) {
          this.dialogVisible = false;
          this.$message.success("添加成功");
          this.reload();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    selectDir() {
      window.api.send("open-directory-dialog", "ContextMenu");
    },
    selectFile() {
      window.api.send("open-file-dialog", "ContextMenu");
    },
    addFileInStation(path) {
      let { label, parent } = this.contextData;
      parent = parent.map((v) => v);
      parent.push(label);
      const params = {
        FilePath: path,
        stationName: parent.join("-"),
      };
      addFileInStation(params).then((res) => {
        const { code, data, data2 } = res.data;
        if (code && data) {
          console.log(data2);
          this.reload();
        }
      });
    },
    // 删除站点 或都从站点删除文件
    deleteItem() {
      let { label, parent, level } = this.contextData;
      if (level == 3) {
        this.$confirm("此操作将从站点移除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.deleteFile();
        });
      } else {
        this.$confirm("此操作将删除该站点, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.deleteStation();
        });
      }
    },
    deleteStation() {
      let { label, parent, level } = this.contextData;
      let params = {};
      switch (level) {
        case 0:
          params["stationName1"] = label;
          break;
        case 1:
          params["stationName1"] = parent[0];
          params["stationName2"] = label;
          break;
        case 2:
          params["stationName1"] = parent[0];
          params["stationName2"] = parent[1];
          params["stationName3"] = label;
          break;
      }
      deleteStation(params).then((res) => {
        const { code, data, data2 } = res.data;
        if (code && data) {
          console.log(data2);
          this.reload();
        }
      });
    },
    deleteFile() {
      let { label, parent, url } = this.contextData;
      parent = parent.map((v) => v);
      let params = {
        stationName: parent.join("-"),
        FilePath: url,
      };
      delFileFromStation(params).then((res) => {
        const { code, data, data2 } = res.data;
        if (code && data) {
          this.$message.success("操作成功");
          this.reload();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 重命名现只针对台站 （文件是否重命名需要确认需求)
    rename() {
      this.dialogTitle = "修改站点名称";
      this.stationName = this.contextData.label;
      this.type = "rename";
      this.dialogVisible = true;
    },
    renameOk() {
      let { label, parent, level } = this.contextData;
      const stationName = this.stationName.trim();
      let params = {};
      switch (level) {
        case 0:
          params["stationName1"] = label;
          params["updateName"] = stationName;
          break;
        case 1:
          params["stationName1"] = parent[0];
          params["stationName2"] = label;
          params["updateName"] = stationName;
          break;
        case 2:
          params["stationName1"] = parent[0];
          params["stationName2"] = parent[1];
          params["stationName3"] = label;
          params["updateName"] = stationName;
          break;
      }
      updateStation(params).then((res) => {
        const { code, data } = res.data;
        if (code && data) {
          this.dialogVisible = false;
          this.$message.success("操作成功");
          this.reload();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    reload() {
      this.$emit("reload");
    },
    editOk(data) {
      console.log("ok", data);
      this.fileInfoVisible = false;
      this.toRes();
    },
    editCancel(data) {
      console.log("cancel", data);
      this.fileInfoVisible = false;
      this.toRes();
    },
    toRes() {
      const { name, url } = this.currFile;
      this.$router.push({
        path: "/result/" + name,
        query: {
          url,
        },
      });
      this.$bus.$emit("checkScroll");
    },
    quit() {
      console.log("quit");
      this.fileInfoVisible = false;
    },
  },

@@ -200,13 +495,15 @@

<style lang="less" scoped>
.context-menu {
  z-index: 1;
  position: absolute;
  background: #fff;
  border: 1px #ccc solid;
  background: #c0c0c0;
  // border: 1px #055AC6 solid;
  border-radius: 4px;
  padding: 4px;
  .contain {
    position: relative;
    background: #c0c0c0;
    z-index: 100;
    .main-ul {
      display: flex;
@@ -215,10 +512,14 @@
        position: relative;
        cursor: pointer;
        flex: 1;
        border: 1px #ccc solid;
        padding: 4px;
        &:hover {
        border: 1px #fff solid;
        .title {
          padding: 4px;
          color: #333;
          background: #f0f0f0;
          &:hover {
            background: #ccc;
          }
        }
        & ~ .main-li {
          margin-top: 2px;
@@ -233,11 +534,12 @@
        top: 0;
        transform: translateX(6px);
        min-width: 10em;
        background: #f0f0f0;
        background: #c0c0c0;
        border-radius: 4px;
        padding: 4px;
        .sub-li {
          border-radius: 4px;
          border: 1px #333 solid;
          border: 1px #fff solid;
          background: #d9dce2;
          &:hover {
            background: #169bd5;
@@ -246,8 +548,8 @@
      }
      .disabled.disabled.disabled {
        cursor: not-allowed;
        color: #aaa;
        background: #ccc;
        color: #eee;
        background: #999;
      }
    }
  }
@@ -261,4 +563,25 @@
    z-index: 99;
  }
}
.file-info {
  :deep(.el-dialog__header) {
    position: relative;
    z-index: 0;
    text-align: center;
    padding-bottom: 16px;
    filter: drop-shadow(0 1px 2px #333);
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: #ccc;
      z-index: -1;
      clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
      background: linear-gradient(#ccc 10%, #fff 50%, #ccc 90%);
    }
  }
}
</style>