From eab5db8f2b336fa8dd213090081af301f7c3606e Mon Sep 17 00:00:00 2001
From: zhutianqi <ztq_qi@sina.com>
Date: Fri, 23 Jul 2021 15:05:02 +0800
Subject: [PATCH] commit

---
 src/pages/config/pages/linkManage/index.vue | 668 ++++++++++----------
 1 file changed, 336 insertions(+), 332 deletions(-)

diff --git a/src/pages/config/pages/linkManage/index.vue b/src/pages/config/pages/linkManage/index.vue
index 9c37984b4..89846f4df 100644
--- a/src/pages/config/pages/linkManage/index.vue
+++ b/src/pages/config/pages/linkManage/index.vue
@@ -1,352 +1,356 @@
 <!-- 配置管理 - 链接管理 -->
 <template>
-  <div id="post-manage">
-<!--    头部操作按钮-->
-    <div class="action-bar">
-      <el-button type="primary"
-                 class="common-button-primary add-button"
-                 @click="addLink"
-                 v-btn-permission="'980cb239683de9e29ee5335cec98e5b4'"
-                 size="mini">新增</el-button>
-<!--      <el-button type="primary"-->
-<!--                 class="common-button-primary add-button"-->
-<!--                 @click="linkOrder"-->
-<!--                 v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"-->
-<!--                 size="mini">顺序调整</el-button>-->
-      <el-button type="primary"
-                 class="common-button-primary add-button"
-                 @click="deleteAllLink"
-                 v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"
-                 size="mini">删除</el-button>
-    </div>
-<!--    表格-->
-    <div class="content">
-      <el-table
-          :data="linkList"
-          tooltip-effect="dark"
-          border
-          style="width: 100%; flex: auto;"
-          class="drag-table"
-          height="100%"
-          :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
+    <div id="post-manage">
+        <!--    头部操作按钮-->
+        <div class="action-bar">
+            <el-button type="primary"
+                       class="common-button-primary add-button"
+                       @click="addLink"
+                       v-btn-permission="'980cb239683de9e29ee5335cec98e5b4'"
+                       size="mini">新增</el-button>
+            <!--      <el-button type="primary"-->
+            <!--                 class="common-button-primary add-button"-->
+            <!--                 @click="linkOrder"-->
+            <!--                 v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"-->
+            <!--                 size="mini">顺序调整</el-button>-->
+            <el-button type="primary"
+                       class="common-button-primary add-button"
+                       @click="deleteAllLink"
+                       v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"
+                       size="mini">删除</el-button>
+        </div>
+        <!--    表格-->
+        <div class="content">
+            <el-table
+                    :data="linkList"
+                    tooltip-effect="dark"
+                    border
+                    style="width: 100%; flex: auto;"
+                    class="drag-table"
+                    height="100%"
+                    :header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
          fontWeight: 'bold', height: '48px'}"
-          @selection-change="handleSelectionChange">
-        <el-table-column
-            type="selection"
-            width="55"
-            align="center">
-        </el-table-column>
-        <el-table-column
-            prop="name"
-            label="链接名称"
-            width="220px">
-        </el-table-column>
-        <el-table-column
-            prop="url"
-            label="链接">
-        </el-table-column>
-<!--        <el-table-column-->
-<!--            prop="orderBy"-->
-<!--            label="序号"-->
-<!--            sortable-->
-<!--            width="170px">-->
-<!--        </el-table-column>-->
-        <el-table-column
-            label="操作"
-            width="50px">
-          <template slot-scope="scope">
-            <div @click.stop style="display: inline-block">
-              <el-dropdown trigger="click" @command="handleCommand">
-                <i class="iconfont">&#xe61e;</i>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item v-btn-permission="'0fbb849e244e07433a90180fb314ad10'" :command="[scope.row, '删除']">删除</el-dropdown-item>
-                  <el-dropdown-item v-btn-permission="'fa0846d977aeef07e9cb7faf648f8f7f'" :command="[scope.row, '编辑']">编辑</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <loading :loading="Loading">加载中...</loading>
-<!--    新增链接弹窗-->
-    <el-dialog
-        :title="dialogTitle"
-        :visible.sync="modalshowflag"
-        :wrapperClosable="false"
-        size="800px"
-        @close="resetForm"
-    >
-      <el-form
-          ref="sarStandardsInfoForm"
-          :model="sarStandardsInfoEO"
-          :rules="sarStandardsInfoRules"
-          class="label-input-form"
-      >
-        <el-form-item label="链接名称" prop="name" label-width="150px" class="add-form-item">
-          <el-input v-model="sarStandardsInfoEO.name"
-                    placeholder="请输入链接名称"
-                    clearable></el-input>
-        </el-form-item>
-        <el-form-item label="链接" prop="url" label-width="150px" class="add-form-item">
-          <el-input v-model="sarStandardsInfoEO.url"
-                    placeholder="请输入链接"
-                    clearable></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="demo-drawer-footer">
+                    @selection-change="handleSelectionChange">
+                <el-table-column
+                        type="selection"
+                        width="55"
+                        align="center">
+                </el-table-column>
+                <el-table-column
+                        prop="orderBy"
+                        label="序号"
+                        align="center"
+                        width="50px">
+                </el-table-column>
+                <el-table-column
+                        prop="name"
+                        label="链接名称"
+                        width="220px">
+                </el-table-column>
+                <el-table-column
+                        prop="url"
+                        label="链接">
+                </el-table-column>
+                <el-table-column
+                        label="操作"
+                        width="50px">
+                    <template slot-scope="scope">
+                        <div @click.stop style="display: inline-block">
+                            <el-dropdown trigger="click" @command="handleCommand">
+                                <i class="iconfont">&#xe61e;</i>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item v-btn-permission="'0fbb849e244e07433a90180fb314ad10'" :command="[scope.row, '删除']">删除</el-dropdown-item>
+                                    <el-dropdown-item v-btn-permission="'fa0846d977aeef07e9cb7faf648f8f7f'" :command="[scope.row, '编辑']">编辑</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <loading :loading="Loading">加载中...</loading>
+        <!--    新增链接弹窗-->
+        <el-dialog
+                :title="dialogTitle"
+                :visible.sync="modalshowflag"
+                :wrapperClosable="false"
+                size="800px"
+                @close="resetForm"
+        >
+            <el-form
+                    ref="sarStandardsInfoForm"
+                    :model="sarStandardsInfoEO"
+                    :rules="sarStandardsInfoRules"
+                    class="label-input-form"
+            >
+                <el-form-item label="链接名称" prop="name" label-width="150px" class="add-form-item">
+                    <el-input v-model="sarStandardsInfoEO.name"
+                              placeholder="请输入链接名称"
+                              clearable></el-input>
+                </el-form-item>
+                <el-form-item label="链接" prop="url" label-width="150px" class="add-form-item">
+                    <el-input v-model="sarStandardsInfoEO.url"
+                              placeholder="请输入链接"
+                              clearable></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="demo-drawer-footer">
                 <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="resetForm">取消</el-button>
                 <el-button type="primary" size="mini" class="common-button-primary" icon="el-icon-check" @click="submit">确定</el-button>
             </span>
-    </el-dialog>
-  </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
     import Sortable from 'sortablejs'
-  export default {
-    name: "linkManage",
-    data () {
-      return {
-        editId: '',
-        type: '', // 1为新增 2为编辑
-        dialogTitle: '',
-        submitLoading: false,
-        // 向后台传参使用
-        data: [],
-        Loading: false,
-        modalshowflag: false,
-        // 排序
-        order:[],
-        // 表格选取的
-        selectList:[],
-        selectId:[],
-        ids:'',
-        // 向后台传参使用
-        sarStandardsInfoEO: {
-          name: '',
-          url: '',
-          // sortId: ''
-        },
-        //新增链接未输入时提示
-        sarStandardsInfoRules: {
-          name: [
-            { required: true, message: '请输入链接名称', trigger: 'blur' }
-          ],
-          url: [
-            { required: true, message: '请输入链接', trigger: 'blur' }
-          ]
-        },
+    export default {
+        name: "linkManage",
+        data () {
+            return {
+                editId: '',
+                type: '', // 1为新增 2为编辑
+                dialogTitle: '',
+                submitLoading: false,
+                // 向后台传参使用
+                data: [],
+                Loading: false,
+                modalshowflag: false,
+                // 排序
+                order:[],
+                // 表格选取的
+                selectList:[],
+                selectId:[],
+                ids:'',
+                // 向后台传参使用
+                sarStandardsInfoEO: {
+                    name: '',
+                    url: '',
+                    // sortId: ''
+                },
+                //新增链接未输入时提示
+                sarStandardsInfoRules: {
+                    name: [
+                        { required: true, message: '请输入链接名称', trigger: 'blur' }
+                    ],
+                    url: [
+                        { required: true, message: '请输入链接', trigger: 'blur' }
+                    ]
+                },
 
-        modalRole: false,
-        props: {
-          label: 'name',
-          children: 'children'
-        },
+                modalRole: false,
+                props: {
+                    label: 'name',
+                    children: 'children'
+                },
 
-        linkList: [],
-          sortData: [],
-      }
-    },
-    methods: {
-      //头部新增按钮
-      addLink () {
-        this.type = 1
-        this.dialogTitle = '新增链接'
-        this.modalshowflag = true
-      },
-
-      //头部顺序调整按钮
-      linkOrder () {
-        this.order=[]
-        for (var i=0;i<this.linkList.length;i++){
-          this.order.push({
-            urlId:this.linkList[i].id,
-            sortId:this.linkList[i].sortId
-          })
-        }
-        this.$http.postData('sarUrl/tsUrl/order',this.order, {}, res => {
-          if (res.ok) {
-          }else {
-            this.$message.warning(res.message)
-          }
-        })
-      },
-
-      //头部删除按钮
-      deleteAllLink() {
-        this.selectId=[]
-        for (var i=0;i<this.selectList.length;i++){
-          this.selectId.push(this.selectList[i].id)
-        }
-        this.ids=this.selectId.join(",")
-        if (this.selectList.length === 0) {
-          this.$message.warning('请选择要删除的链接')
-        } else {
-          this.modalRole = true
-          // this.nodeList = this.selectList[0].idList
-          this.$http.delete('sarUrl/tsUrl/deleteBatch', {
-            ids: this.ids
-          }, {}, res => {
-            if (res.ok) {
-              this.$message.success('删除成功')
-              this.getLink()
-            }else {
-              this.$message.warning(res.message)
+                linkList: [],
+                sortData: [],
             }
-          })
-        }
-      },
-
-      //弹窗关闭操作
-      resetForm () {
-        this.$refs['sarStandardsInfoForm'].resetFields();
-        this.modalshowflag = false
-      },
-
-      //弹窗确认操作
-      submit () {
-        this.$refs['sarStandardsInfoForm'].validate((valid) => {
-          if (valid) {
-            if (this.type === 1) {
-              this.$http.postData('/sarUrl/tsUrl/add', {
-                ...this.sarStandardsInfoEO,
-              }, {
-                _this: this,
-                loading: 'Loading'
-              }, res=> {
-                if (res.ok) {
-                  this.$message.success('新增成功')
-                  this.modalshowflag = false
-                  this.getLink()
-                } else {
-                  this.$message.warning(res.message)
-                }
-              })
-            } else {
-              // 编辑
-              this.$http.putData('/sarUrl/tsUrl/edit', {
-                id: this.editId,
-                name: this.sarStandardsInfoEO.name,
-                url: this.sarStandardsInfoEO.url,
-              }, {
-                _this: this,
-                loading: 'Loading'
-              }, res=> {
-                if (res.ok) {
-                  this.$message.success('修改成功')
-                  this.modalshowflag = false
-                  this.getLink()
-                } else {
-                  this.$message.warning(res.message)
-                }
-              })
-            }
-          } else {
-            return false;
-          }
-        });
-      },
-
-      //表格中操作列
-      handleCommand (command) {
-        switch (command[1]) {
-          case '删除':
-            this.deleteLink(command[0])
-            break
-          case '编辑':
-            this.editLink(command[0])
-            break
-        }
-      },
-
-      //表格中操作列删除操作弹窗
-      deleteLink (row) {
-        this.$http.delete('sarUrl/tsUrl/delete', {
-          id: row.id
-        }, {
-          _this: this,
-          loading: 'Loading'
-        }, res => {
-          if (res.ok) {
-            this.$message.success('删除成功')
-            this.getLink()
-          }else {
-            this.$message.warning(res.message)
-          }
-        })
-      },
-
-      //表格中操作列编辑操作弹窗
-      editLink (row) {
-        this.type = 2
-        this.editId = row.id
-        this.sarStandardsInfoEO.name = row.name
-        this.sarStandardsInfoEO.url = row.url
-        this.sarStandardsInfoEO.sortId = row.sortId
-        this.dialogTitle = '修改链接'
-        this.modalshowflag = true
-      },
-
-      //多选框选择
-      handleSelectionChange (val) {
-        this.selectList = val
-      },
-
-      // 获取链接数据
-      getLink () {
-        this.$http.get('sarUrl/tsUrl', {
-          }, {
-            _this: this,
-            loading: 'Loading'
-          }, res=> {
-          this.linkList = res.data
-            this.initSortable()
-        })
-      },
-        initSortable () {
-            this.sortData = [...this.linkList]
-            const el = document.querySelector('.el-table__body-wrapper tbody')
-            //创建拖拽对象
-            this.sortable = Sortable.create(el, {
-                sort: true, //是否可进行拖拽排序
-                animation: 150,
-                onEnd: ({newIndex, oldIndex}) => {
-                    const val = this.sortData[oldIndex]
-                    this.sortData.splice(oldIndex, 1)
-                    this.sortData.splice(newIndex, 0, val)
-                    this.sortData.forEach((item, index) => {
-                        item.orderBy = index + 1
-                    })
-                    let arr = []
-                    this.sortData.forEach(item => {
-                        let json = {}
-                        json.id = item.id
-                        json.orderBy = item.orderBy
-                        arr.push(json)
-                    })
-                    this.$http.putData('sarUrl/tsUrl/updateOrder', JSON.stringify(arr), {}, res => {
-                        this.$message.success('保存成功')
-                    })
-                }
-            })
         },
-    },
-    mounted() {
-      this.getLink();
+        methods: {
+            //头部新增按钮
+            addLink () {
+                this.type = 1
+                this.dialogTitle = '新增链接'
+                this.modalshowflag = true
+            },
+            //表格中操作列删除操作弹窗
+            deleteLink (row) {
+                this.$http.delete('sarUrl/tsUrl/delete', {
+                    id: row.id
+                }, {
+                    _this: this,
+                    loading: 'Loading'
+                }, res => {
+                    if (res.ok) {
+                        this.$message.success('删除成功')
+                        let arr = []
+                        for (let a = 0; a < this.linkList.length; a++) {
+                            if (this.linkList[a].id === row.id) {
+                                this.linkList.splice(a, 1)
+                            }
+                        }
+                        this.linkList.forEach((item, index) => {
+                            let json = {}
+                            json.id = item.id
+                            json.orderBy = index + 1
+                            arr.push(json)
+                        })
+                        this.$http.putData('sarUrl/tsUrl/updateOrder', JSON.stringify(arr), {}, res => {
+                            this.getLink()
+                        })
+                    }else {
+                        this.$message.warning(res.message)
+                    }
+                })
+            },
+            //头部删除按钮
+            deleteAllLink() {
+                this.selectId=[]
+                for (var i=0;i<this.selectList.length;i++){
+                    this.selectId.push(this.selectList[i].id)
+                }
+                this.ids = this.selectId.join(",")
+                if (this.selectList.length === 0) {
+                    this.$message.warning('请选择要删除的链接')
+                } else {
+                    this.modalRole = true
+                    this.$http.delete('sarUrl/tsUrl/deleteBatch', {
+                        ids: this.ids
+                    }, {}, res => {
+                        if (res.ok) {
+                            this.$message.success('删除成功')
+                            let arr = this.linkList.filter(items => {
+                                if (!this.ids.includes(items.id)) return items;
+                            })
+                            let newArr = []
+                            arr.forEach((item, index) => {
+                                let json = {}
+                                json.id = item.id
+                                json.orderBy = index + 1
+                                newArr.push(json)
+                            })
+                            this.$http.putData('sarUrl/tsUrl/updateOrder', JSON.stringify(newArr), {}, res => {
+                                this.getLink()
+                            })
+                        }else {
+                            this.$message.warning(res.message)
+                        }
+                    })
+                }
+            },
+            //弹窗关闭操作
+            resetForm () {
+                this.$refs['sarStandardsInfoForm'].resetFields();
+                this.modalshowflag = false
+            },
+            //弹窗确认操作
+            submit () {
+                this.$refs['sarStandardsInfoForm'].validate((valid) => {
+                    if (valid) {
+                        if (this.type === 1) {
+                            this.$http.postData('/sarUrl/tsUrl/add', {
+                                ...this.sarStandardsInfoEO,
+                            }, {
+                                _this: this,
+                                loading: 'Loading'
+                            }, res=> {
+                                if (res.ok) {
+                                    this.$message.success('新增成功')
+                                    this.modalshowflag = false
+                                    this.getLink()
+                                } else {
+                                    this.$message.warning(res.message)
+                                }
+                            })
+                        } else {
+                            // 编辑
+                            this.$http.putData('/sarUrl/tsUrl/edit', {
+                                id: this.editId,
+                                name: this.sarStandardsInfoEO.name,
+                                url: this.sarStandardsInfoEO.url,
+                            }, {
+                                _this: this,
+                                loading: 'Loading'
+                            }, res=> {
+                                if (res.ok) {
+                                    this.$message.success('修改成功')
+                                    this.modalshowflag = false
+                                    this.getLink()
+                                } else {
+                                    this.$message.warning(res.message)
+                                }
+                            })
+                        }
+                    } else {
+                        return false;
+                    }
+                });
+            },
+            //表格中操作列
+            handleCommand (command) {
+                switch (command[1]) {
+                    case '删除':
+                        this.deleteLink(command[0])
+                        break
+                    case '编辑':
+                        this.editLink(command[0])
+                        break
+                }
+            },
+            //表格中操作列编辑操作弹窗
+            editLink (row) {
+                this.type = 2
+                this.editId = row.id
+                this.sarStandardsInfoEO.name = row.name
+                this.sarStandardsInfoEO.url = row.url
+                this.sarStandardsInfoEO.sortId = row.sortId
+                this.dialogTitle = '修改链接'
+                this.modalshowflag = true
+            },
+            //多选框选择
+            handleSelectionChange (val) {
+                this.selectList = val
+            },
+            // 获取链接数据
+            getLink () {
+                this.$http.get('sarUrl/tsUrl', {
+                }, {
+                    _this: this,
+                    loading: 'Loading'
+                }, res=> {
+                    this.linkList = res.data
+                    this.initSortable()
+                })
+            },
+            initSortable () {
+                this.sortData = [...this.linkList]
+                const el = document.querySelector('.el-table__body-wrapper tbody')
+                //创建拖拽对象
+                this.sortable = Sortable.create(el, {
+                    sort: true, //是否可进行拖拽排序
+                    animation: 150,
+                    onEnd: ({newIndex, oldIndex}) => {
+                        const val = this.sortData[oldIndex]
+                        this.sortData.splice(oldIndex, 1)
+                        this.sortData.splice(newIndex, 0, val)
+                        this.sortData.forEach((item, index) => {
+                            item.orderBy = index + 1
+                        })
+                        let arr = []
+                        this.sortData.forEach(item => {
+                            let json = {}
+                            json.id = item.id
+                            json.orderBy = item.orderBy
+                            arr.push(json)
+                        })
+                        this.$http.putData('sarUrl/tsUrl/updateOrder', JSON.stringify(arr), {}, res => {
+                            if (res.ok) {
+                                this.$message.success('保存成功')
+                            } else {
+                                this.$message.warning('保存失败!')
+                            }
+                        })
+                    }
+                })
+            },
+        },
+        mounted() {
+            this.getLink();
+        }
     }
-  }
 </script>
 
 <style lang="less" scoped>
-  @import '~@/assets/styles/mixins';
-  #post-manage {
-    height: 100%;
-    .content {
-      height: calc(~'100% - 53px')
+    @import '~@/assets/styles/mixins';
+    #post-manage {
+        height: 100%;
+        .content {
+            height: calc(~'100% - 53px')
+        }
+        .filter-tree {
+            height: calc(~'100% - 50px')
+        }
     }
-    .filter-tree {
-      height: calc(~'100% - 50px')
-    }
-  }
 </style>