This commit is contained in:
zhutianqi
2021-07-23 15:05:02 +08:00
parent ad17c41a84
commit eab5db8f2b
+336 -332
View File
@@ -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>