|
@@ -0,0 +1,482 @@
|
|
|
+<template>
|
|
|
+ <div class="desktopToolList">
|
|
|
+ <div class="title_examine">
|
|
|
+ <div class="pub_title">工具列表</div>
|
|
|
+ <div class="t_right">
|
|
|
+ <el-button type="primary" size="small" @click="addTool()"
|
|
|
+ >添加工具</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table_content tableArea">
|
|
|
+ <div class="button_top">
|
|
|
+ <div @click="changeStatus('')">全部({{ pageData.total }})</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="desktopList"
|
|
|
+ stripe
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ >
|
|
|
+ <el-table-column label="标识" min-width="45" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.toolId ? scope.row.toolId : "-"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="宽度" min-width="45" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.dialogWidth ? scope.row.dialogWidth : "-"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="高度" min-width="45" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.dialogHeight ? scope.row.dialogHeight : "-"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="描述" min-width="200" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.description ? scope.row.description : "-"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="工具设置" min-width="45" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover placement="bottom" width="840" trigger="hover">
|
|
|
+ <div class="urlItemBox">
|
|
|
+ <div
|
|
|
+ class="urlItem"
|
|
|
+ v-for="(item, index) in scope.row.url"
|
|
|
+ :key="scope.row.id + '-' + index"
|
|
|
+ >
|
|
|
+ <span>{{ item.region }}</span>
|
|
|
+ <div class="ui_message">
|
|
|
+ <div>名称:{{ item.name ? item.name : "-" }}</div>
|
|
|
+ <div>
|
|
|
+ <span>链接:</span
|
|
|
+ ><a :href="item.url" v-if="item.url" target="_blank">{{
|
|
|
+ item.url
|
|
|
+ }}</a
|
|
|
+ ><span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>桌面图标:</span>
|
|
|
+ <div class="ui_m_image">
|
|
|
+ <el-image
|
|
|
+ v-if="item.icon"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="item.icon"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>平台图标:</span>
|
|
|
+ <div class="ui_m_image">
|
|
|
+ <el-image
|
|
|
+ v-if="item.platformIcon"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="item.platformIcon"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>默认图标:</span>
|
|
|
+ <div class="ui_m_image">
|
|
|
+ <el-image
|
|
|
+ v-if="item.defaultIcon"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="item.defaultIcon"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>激活图标:</span>
|
|
|
+ <div class="ui_m_image">
|
|
|
+ <el-image
|
|
|
+ v-if="item.activeIcon"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="item.activeIcon"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button slot="reference">查看设置</el-button>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="参数" min-width="150" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.argumentList.length">
|
|
|
+ <el-tag
|
|
|
+ v-for="(item, index) in scope.row.argumentList"
|
|
|
+ :key="index"
|
|
|
+ style="margin-right: 10px"
|
|
|
+ effect="plain"
|
|
|
+ >{{ item }}</el-tag
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="仅管理员显示"
|
|
|
+ min-width="45"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.isAdmin == "1" ? "是" : "否"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="工具状态" min-width="50" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ statusList[scope.row.status]
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="200px" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <button
|
|
|
+ @click="editTool(scope.row)"
|
|
|
+ style="
|
|
|
+ color: #308fff;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ v-if="scope.row.status == '0'"
|
|
|
+ @click="changeToolStatus(scope.row, '1')"
|
|
|
+ style="
|
|
|
+ color: #ff2570;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 停用
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ v-if="scope.row.status == '1'"
|
|
|
+ @click="changeToolStatus(scope.row, '0')"
|
|
|
+ style="
|
|
|
+ color: #67C23A;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 25px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 启用
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 10px"
|
|
|
+ :current-page="pageData.nowPage"
|
|
|
+ :page-size="pageData.lim"
|
|
|
+ :total="pageData.total"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ layout="total,prev, pager, next, jumper"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <addDesktopToolDialog
|
|
|
+ ref="addDesktopToolDialogRef"
|
|
|
+ @success="addDesktopToolSuccess"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { API_CONFIG } from "@/common/apiConfig";
|
|
|
+import addDesktopToolDialog from "./dialog/addDesktopToolDialog.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ addDesktopToolDialog,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ desktopList: [],
|
|
|
+ selectStatus: "",
|
|
|
+ pageData: {
|
|
|
+ nowPage: 1,
|
|
|
+ lim: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ statusList: ["正常使用", "已停用", "已删除"],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 表头的背景色
|
|
|
+ headerCellStyle() {
|
|
|
+ return { backgroundColor: "#f1f1f1" };
|
|
|
+ },
|
|
|
+ //获取数据
|
|
|
+ getData() {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ functionName: "select_desktopToolByPage",
|
|
|
+ status: this.selectStatus,
|
|
|
+ page: this.pageData.nowPage,
|
|
|
+ lim: this.pageData.lim,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.loading = true;
|
|
|
+ this.$ajax
|
|
|
+ .post(API_CONFIG.baseUrl, params)
|
|
|
+ .then((res) => {
|
|
|
+ let _data = res.data;
|
|
|
+ let _list = _data[0];
|
|
|
+ let _total = _data[1][0].total;
|
|
|
+ _list.forEach((i) => {
|
|
|
+ i.url = JSON.parse(i.url);
|
|
|
+ i.json = JSON.parse(i.json);
|
|
|
+ i.argumentList = JSON.parse(i.argumentList);
|
|
|
+ });
|
|
|
+ this.desktopList = _list;
|
|
|
+ this.pageData.total = _total;
|
|
|
+ this.loading = false;
|
|
|
+ // console.log(_data)
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error("获取工具数据失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handlePageChange(newPage) {
|
|
|
+ this.pageData.nowPage = newPage;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ addTool() {
|
|
|
+ this.$refs.addDesktopToolDialogRef.open();
|
|
|
+ },
|
|
|
+ addDesktopToolSuccess(form) {
|
|
|
+ if (form.id) {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ functionName: "update_desktopToolById",
|
|
|
+ id: form.id,
|
|
|
+ toolId:form.toolId,
|
|
|
+ width: form.dialogWidth,
|
|
|
+ height: form.dialogHeight,
|
|
|
+ description: form.description,
|
|
|
+ admin: form.isAdmin,
|
|
|
+ argumentList: JSON.stringify(form.argumentList),
|
|
|
+ url: JSON.stringify(form.url),
|
|
|
+ json: JSON.stringify(form.json),
|
|
|
+ status: form.status,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = true;
|
|
|
+ this.$ajax
|
|
|
+ .post(API_CONFIG.baseUrl, params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ this.$refs.addDesktopToolDialogRef.close();
|
|
|
+ this.$message.success("修改工具成功");
|
|
|
+ } else if(res.data[0][0].message == "repeat toolId"){
|
|
|
+ this.$message.error("工具标识重复!")
|
|
|
+ } else {
|
|
|
+ this.$message.error("修改工具失败");
|
|
|
+ }
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = false;
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("修改工具失败");
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ functionName: "insert_desktopTool",
|
|
|
+ toolId:form.toolId,
|
|
|
+ width: form.dialogWidth,
|
|
|
+ height: form.dialogHeight,
|
|
|
+ description: form.description,
|
|
|
+ admin: form.isAdmin,
|
|
|
+ argumentList: JSON.stringify(form.argumentList),
|
|
|
+ url: JSON.stringify(form.url),
|
|
|
+ json: JSON.stringify(form.json),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = true;
|
|
|
+ this.$ajax
|
|
|
+ .post(API_CONFIG.baseUrl, params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.data == 1) {
|
|
|
+ this.$refs.addDesktopToolDialogRef.close();
|
|
|
+ this.$message.success("添加工具成功");
|
|
|
+ } else if(res.data[0][0].message == "repeat toolId"){
|
|
|
+ this.$message.error("工具标识重复!")
|
|
|
+ }else{
|
|
|
+ this.$message.error("添加工具失败");
|
|
|
+ }
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = false;
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("添加工具失败");
|
|
|
+ this.$refs.addDesktopToolDialogRef.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editTool(item) {
|
|
|
+ this.$refs.addDesktopToolDialogRef.open(item);
|
|
|
+ },
|
|
|
+ changeStatus() {
|
|
|
+ this.pageData.nowPage = 1;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ changeToolStatus(item, newValue) {
|
|
|
+ let _data = JSON.parse(JSON.stringify(item));
|
|
|
+ _data.status = newValue;
|
|
|
+ this.loading = true;
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ functionName: "update_desktopToolById",
|
|
|
+ id: _data.id,
|
|
|
+ toolId:_data.toolId,
|
|
|
+ width: _data.dialogWidth,
|
|
|
+ height: _data.dialogHeight,
|
|
|
+ description: _data.description,
|
|
|
+ admin: _data.isAdmin,
|
|
|
+ argumentList: JSON.stringify(_data.argumentList),
|
|
|
+ url: JSON.stringify(_data.url),
|
|
|
+ json: JSON.stringify(_data.json),
|
|
|
+ status: _data.status,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.$ajax
|
|
|
+ .post(API_CONFIG.baseUrl, params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ this.$message.success("已停用");
|
|
|
+ } else {
|
|
|
+ this.$message.error("停用失败");
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.error("停用失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.desktopToolList {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.tableArea {
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.button_top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.button_top > div {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.title_examine {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.urlItemBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.urlItem {
|
|
|
+ width: 400px;
|
|
|
+ height: 250px;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: solid 1px #ebeef5;
|
|
|
+}
|
|
|
+
|
|
|
+/* .urlItem::after{
|
|
|
+ content: "";
|
|
|
+ height: 2px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ebeef5;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+} */
|
|
|
+
|
|
|
+.urlItem:nth-child(2n) {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.urlItem > span {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.ui_m_image {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ui_message > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ui_message > div > span {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+</style>
|