链接新增编辑
This commit is contained in:
shenyanpei
@@ -0,0 +1,10 @@
|
|||||||
|
import axios from "@/common/axiosV2";
|
||||||
|
|
||||||
|
export function getImg (data) {
|
||||||
|
return axios({
|
||||||
|
url: 'api/sarUrl/tsUrl/getIconImg',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
responseType: 'arraybuffer'
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -1,393 +1,68 @@
|
|||||||
<!-- 配置管理 - 链接管理 -->
|
<!-- 配置管理 - 链接管理 -->
|
||||||
<template>
|
<template>
|
||||||
<div id="post-manage">
|
<div class="data-link">
|
||||||
<!-- 头部操作按钮-->
|
<el-tabs v-model="activeName">
|
||||||
<div class="action-bar">
|
<el-tab-pane label="第一行链接" name="firstLink">
|
||||||
<el-button type="primary"
|
<first-link v-if="activeName === 'firstLink'"></first-link>
|
||||||
class="common-button-primary add-button"
|
</el-tab-pane>
|
||||||
@click="addLink"
|
<el-tab-pane label="第二行链接" name="secondLink">
|
||||||
v-btn-permission="'980cb239683de9e29ee5335cec98e5b4'"
|
<second-link v-if="activeName === 'secondLink'"></second-link>
|
||||||
size="mini">新增</el-button>
|
</el-tab-pane>
|
||||||
<!-- <el-button type="primary"-->
|
</el-tabs>
|
||||||
<!-- class="common-button-primary add-button"-->
|
</div>
|
||||||
<!-- @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="orderBy"
|
|
||||||
label="序号"
|
|
||||||
align="center"
|
|
||||||
width="50px">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="name"
|
|
||||||
label="链接名称">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="链接">
|
|
||||||
<template slot-scope="scope" >
|
|
||||||
<span v-if="scope.row.url.slice(0,7) === 'http://'" @click="linkto(scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">
|
|
||||||
{{ scope.row.url }}
|
|
||||||
</span>
|
|
||||||
<span v-else @click="linkto('http://' + scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">{{ scope.row.url }}</span>
|
|
||||||
</template>
|
|
||||||
</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"></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
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
: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="请输入链接名称"
|
|
||||||
maxlength="30"
|
|
||||||
show-word-limit
|
|
||||||
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"
|
|
||||||
maxlength="100"
|
|
||||||
show-word-limit
|
|
||||||
placeholder="请输入链接">
|
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Sortable from 'sortablejs'
|
import firstLink from "./linkType/firstLink";
|
||||||
export default {
|
import secondLink from "./linkType/secondLink";
|
||||||
name: "linkManage",
|
export default {
|
||||||
data () {
|
name: "linkManage",
|
||||||
return {
|
components: {
|
||||||
editId: '',
|
firstLink,
|
||||||
type: '', // 1为新增 2为编辑
|
secondLink
|
||||||
dialogTitle: '',
|
},
|
||||||
submitLoading: false,
|
data() {
|
||||||
// 向后台传参使用
|
return {
|
||||||
data: [],
|
activeName: 'firstLink',
|
||||||
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'
|
|
||||||
},
|
|
||||||
|
|
||||||
linkList: [],
|
|
||||||
sortData: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//链接点击跳转,链接形式为http://xxxxxx
|
|
||||||
linkto(link_href){
|
|
||||||
window.open(link_href)
|
|
||||||
},
|
|
||||||
//头部新增按钮
|
|
||||||
addLink () {
|
|
||||||
this.type = 1
|
|
||||||
this.dialogTitle = '新增链接'
|
|
||||||
this.modalshowflag = true
|
|
||||||
},
|
|
||||||
//表格中操作列删除操作弹窗
|
|
||||||
deleteLink (row) {
|
|
||||||
this.$confirm('此操作将删除该链接, 是否继续?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'info',
|
|
||||||
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.$confirm('此操作将删除链接, 是否继续?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'info',
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '~@/assets/styles/mixins';
|
@import '~@/assets/styles/mixins';
|
||||||
#post-manage {
|
.data-link{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.content {
|
padding: 0 10px;
|
||||||
height: calc(~'100% - 53px')
|
background: #fff;
|
||||||
}
|
display: flex;
|
||||||
.filter-tree {
|
flex-direction: column;
|
||||||
height: calc(~'100% - 50px')
|
|
||||||
}
|
/deep/ .el-tabs {
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/deep/ .el-tabs__header {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-tabs__content {
|
||||||
|
height: 100% !important;
|
||||||
|
flex: auto;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.el-tab-pane {
|
||||||
|
height: 100%;
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,556 @@
|
|||||||
|
<!-- 配置管理 - 链接管理 -->
|
||||||
|
<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="danger"
|
||||||
|
class="common-button-primary add-button"
|
||||||
|
@click="deleteAllLink"
|
||||||
|
v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"
|
||||||
|
size="mini">删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 表格-->
|
||||||
|
<div class="content">
|
||||||
|
<el-table
|
||||||
|
:data="linkListFirst"
|
||||||
|
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="orderBy"
|
||||||
|
label="序号"
|
||||||
|
align="center"
|
||||||
|
width="50px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="链接名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="icon"
|
||||||
|
label="链接图标">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img v-if="scope.row.icon !== ''" style="height: 50px;width: 50px" :src="scope.row.icon">
|
||||||
|
<span v-else>{{'-'}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="url"
|
||||||
|
show-overflow-tooltip
|
||||||
|
label="链接">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.url.slice(0,7) === 'http://' || scope.row.url.slice(0,8) === 'https://'" @click="linkto(scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">
|
||||||
|
{{ scope.row.url }}
|
||||||
|
</span>
|
||||||
|
<span v-else @click="linkto('http://' + scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">
|
||||||
|
{{ 'http://' + scope.row.url }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</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"></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
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
: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="type" label-width="150px" class="add-form-item">
|
||||||
|
<el-input :disabled="true" v-if="sarStandardsInfoEO.type === 1" value="第一行链接"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接名称" prop="name" label-width="150px" class="add-form-item">
|
||||||
|
<el-input
|
||||||
|
v-model="sarStandardsInfoEO.name"
|
||||||
|
placeholder="请输入链接名称"
|
||||||
|
maxlength="20"
|
||||||
|
show-word-limit
|
||||||
|
clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接图标" prop="icon" label-width="150px" class="add-form-item">
|
||||||
|
<el-upload
|
||||||
|
v-model="sarStandardsInfoEO.icon"
|
||||||
|
class="upload-demo"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:show-file-list="false"
|
||||||
|
:limit="1"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<img width="100%" v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接" prop="url" label-width="150px" class="add-form-item">
|
||||||
|
<el-input
|
||||||
|
v-model="sarStandardsInfoEO.url"
|
||||||
|
maxlength="100"
|
||||||
|
show-word-limit
|
||||||
|
placeholder="请输入链接">
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Sortable from 'sortablejs'
|
||||||
|
import { getImg } from '@/api/linkApi.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "firstLink",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editId: '',
|
||||||
|
type: '', // 1为新增 2为编辑
|
||||||
|
dialogTitle: '',
|
||||||
|
submitLoading: false,
|
||||||
|
// 向后台传参使用
|
||||||
|
data: [],
|
||||||
|
Loading: false,
|
||||||
|
modalshowflag: false,
|
||||||
|
// 排序
|
||||||
|
order: [],
|
||||||
|
// 表格选取的
|
||||||
|
selectList: [],
|
||||||
|
selectId: [],
|
||||||
|
ids: '',
|
||||||
|
// 向后台传参使用
|
||||||
|
sarStandardsInfoEO: {
|
||||||
|
name: '',
|
||||||
|
url: '',
|
||||||
|
icon: '',
|
||||||
|
type: 1,
|
||||||
|
// sortId: ''
|
||||||
|
},
|
||||||
|
//新增链接未输入时提示
|
||||||
|
sarStandardsInfoRules: {
|
||||||
|
name: [
|
||||||
|
{required: true, message: '请输入链接名称', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
url: [
|
||||||
|
{required: true, message: '请输入链接', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
modalRole: false,
|
||||||
|
props: {
|
||||||
|
label: 'name',
|
||||||
|
children: 'children'
|
||||||
|
},
|
||||||
|
|
||||||
|
linkListFirst: [],
|
||||||
|
linkList: [],
|
||||||
|
sortData: [],
|
||||||
|
|
||||||
|
imageUrl: '',
|
||||||
|
uploadUrl: 'api/att/attFile/upload',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//链接点击跳转,链接形式为http://xxxxxx
|
||||||
|
linkto(link_href) {
|
||||||
|
window.open(link_href)
|
||||||
|
},
|
||||||
|
//头部新增按钮
|
||||||
|
addLink() {
|
||||||
|
this.type = 1
|
||||||
|
this.dialogTitle = '新增链接'
|
||||||
|
this.modalshowflag = true
|
||||||
|
},
|
||||||
|
//表格中操作列删除操作弹窗
|
||||||
|
deleteLink(row) {
|
||||||
|
this.$confirm('此操作将删除该链接, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
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 => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.linkListFirst = []
|
||||||
|
this.getLink()
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
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.$confirm('此操作将删除链接, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
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 => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.linkListFirst = []
|
||||||
|
this.getLink()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '已取消删除'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 链接图片上传 */
|
||||||
|
//
|
||||||
|
handleAvatarSuccess(res, file, fileList) {
|
||||||
|
if (res.ok) {
|
||||||
|
this.imageUrl = URL.createObjectURL(file.raw)
|
||||||
|
this.sarStandardsInfoEO.icon = res.data.attId
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 链接图片上传格式限制
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const index = file.name.lastIndexOf('.')
|
||||||
|
const ext = file.name.substr(index + 1)
|
||||||
|
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
|
||||||
|
const isType = (ext === 'jpeg' || ext === 'jpg' || ext === 'png')
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
|
||||||
|
if (!isJPG || !isType) {
|
||||||
|
this.$message.error('上传头像图片只能是 .jpg、.jpeg、.png 格式!');
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
||||||
|
}
|
||||||
|
return isJPG && isLt2M && isType;
|
||||||
|
},
|
||||||
|
//弹窗关闭操作
|
||||||
|
resetForm() {
|
||||||
|
this.$refs['sarStandardsInfoForm'].resetFields();
|
||||||
|
this.imageUrl = ''
|
||||||
|
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.imageUrl = ''
|
||||||
|
this.linkListFirst = []
|
||||||
|
this.getLink()
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 编辑
|
||||||
|
this.$http.putData('/sarUrl/tsUrl/edit', {
|
||||||
|
id: this.editId,
|
||||||
|
name: this.sarStandardsInfoEO.name,
|
||||||
|
type: this.sarStandardsInfoEO.type,
|
||||||
|
url: this.sarStandardsInfoEO.url,
|
||||||
|
icon: this.sarStandardsInfoEO.icon
|
||||||
|
}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'Loading'
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.$message.success('修改成功')
|
||||||
|
this.modalshowflag = false
|
||||||
|
this.linkListFirst = []
|
||||||
|
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.sarStandardsInfoEO.icon = row.icon
|
||||||
|
if (row.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: row.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
this.imageUrl = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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
|
||||||
|
res.data.forEach(item=>{
|
||||||
|
if (item.type === 1) {
|
||||||
|
this.linkListFirst.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.linkListFirst.forEach(item=>{
|
||||||
|
if (item.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: item.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
item.icon = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.initSortable()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initSortable() {
|
||||||
|
this.sortData = [...this.linkListFirst]
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
margin-top: 10px;
|
||||||
|
border-color: #409EFF;
|
||||||
|
}
|
||||||
|
.avatar-uploader {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-tree {
|
||||||
|
height: calc(~'100% - 50px')
|
||||||
|
}
|
||||||
|
/deep/.el-input.is-disabled .el-input__inner {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,555 @@
|
|||||||
|
<!-- 配置管理 - 链接管理 -->
|
||||||
|
<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="danger"
|
||||||
|
class="common-button-primary add-button"
|
||||||
|
@click="deleteAllLink"
|
||||||
|
v-btn-permission="'779665b2e4bb20fc480cf9372a100f69'"
|
||||||
|
size="mini">删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 表格-->
|
||||||
|
<div class="content">
|
||||||
|
<el-table
|
||||||
|
:data="linkListSecond"
|
||||||
|
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="orderBy"
|
||||||
|
label="序号"
|
||||||
|
align="center"
|
||||||
|
width="50px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="链接名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="icon"
|
||||||
|
label="链接图标">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img style="height: 50px;width: 50px" :src="scope.row.icon">
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="url"
|
||||||
|
show-overflow-tooltip
|
||||||
|
label="链接">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.url.slice(0,7) === 'http://' || scope.row.url.slice(0,8) === 'https://'" @click="linkto(scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">
|
||||||
|
{{ scope.row.url }}
|
||||||
|
</span>
|
||||||
|
<span v-else @click="linkto('http://' + scope.row.url)" style="color: #0c91e5;cursor: pointer;text-decoration: underline">
|
||||||
|
{{ 'http://' + scope.row.url }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</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"></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
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
: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="type" label-width="150px" class="add-form-item">
|
||||||
|
<el-input :disabled="true" v-if="sarStandardsInfoEO.type === 2" value="第二行链接"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接名称" prop="name" label-width="150px" class="add-form-item">
|
||||||
|
<el-input
|
||||||
|
v-model="sarStandardsInfoEO.name"
|
||||||
|
placeholder="请输入链接名称"
|
||||||
|
maxlength="30"
|
||||||
|
show-word-limit
|
||||||
|
clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接图标" prop="icon" label-width="150px" class="add-form-item">
|
||||||
|
<el-upload
|
||||||
|
v-model="sarStandardsInfoEO.icon"
|
||||||
|
class="avatar-uploader"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:show-file-list="false"
|
||||||
|
:limit="1"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload">
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="链接" prop="url" label-width="150px" class="add-form-item">
|
||||||
|
<el-input
|
||||||
|
v-model="sarStandardsInfoEO.url"
|
||||||
|
maxlength="100"
|
||||||
|
show-word-limit
|
||||||
|
placeholder="请输入链接">
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Sortable from 'sortablejs'
|
||||||
|
import { getImg } from '@/api/linkApi.js'
|
||||||
|
import listOfCost from "../../../../regulatoryRepository/dataStatis/page/listOfCost";
|
||||||
|
export default {
|
||||||
|
name: "secondLink",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editId: '',
|
||||||
|
type: '', // 1为新增 2为编辑
|
||||||
|
dialogTitle: '',
|
||||||
|
submitLoading: false,
|
||||||
|
// 向后台传参使用
|
||||||
|
data: [],
|
||||||
|
Loading: false,
|
||||||
|
modalshowflag: false,
|
||||||
|
// 排序
|
||||||
|
order: [],
|
||||||
|
// 表格选取的
|
||||||
|
selectList: [],
|
||||||
|
selectId: [],
|
||||||
|
ids: '',
|
||||||
|
// 向后台传参使用
|
||||||
|
sarStandardsInfoEO: {
|
||||||
|
name: '',
|
||||||
|
url: '',
|
||||||
|
icon: '',
|
||||||
|
type: 2,
|
||||||
|
// sortId: ''
|
||||||
|
},
|
||||||
|
//新增链接未输入时提示
|
||||||
|
sarStandardsInfoRules: {
|
||||||
|
name: [
|
||||||
|
{required: true, message: '请输入链接名称', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
url: [
|
||||||
|
{required: true, message: '请输入链接', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
modalRole: false,
|
||||||
|
props: {
|
||||||
|
label: 'name',
|
||||||
|
children: 'children'
|
||||||
|
},
|
||||||
|
|
||||||
|
linkList: [],
|
||||||
|
linkListSecond: [],
|
||||||
|
sortData: [],
|
||||||
|
|
||||||
|
imageUrl: '',
|
||||||
|
uploadUrl: 'api/att/attFile/upload',
|
||||||
|
verifyImg: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//链接点击跳转,链接形式为http://xxxxxx
|
||||||
|
linkto(link_href) {
|
||||||
|
window.open(link_href)
|
||||||
|
},
|
||||||
|
//头部新增按钮
|
||||||
|
addLink() {
|
||||||
|
this.type = 1
|
||||||
|
this.dialogTitle = '新增链接'
|
||||||
|
this.modalshowflag = true
|
||||||
|
},
|
||||||
|
//表格中操作列删除操作弹窗
|
||||||
|
deleteLink(row) {
|
||||||
|
this.$confirm('此操作将删除该链接, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
|
||||||
|
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 => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.linkListSecond = []
|
||||||
|
this.getLink()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
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.$confirm('此操作将删除链接, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
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 => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.linkListSecond = []
|
||||||
|
this.getLink()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '已取消删除'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 链接图片上传 */
|
||||||
|
//
|
||||||
|
handleAvatarSuccess(res, file, fileList) {
|
||||||
|
if (res.ok) {
|
||||||
|
this.imageUrl = URL.createObjectURL(file.raw)
|
||||||
|
this.sarStandardsInfoEO.icon = res.data.attId
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 链接图片上传格式限制
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const index = file.name.lastIndexOf('.')
|
||||||
|
const ext = file.name.substr(index + 1)
|
||||||
|
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
|
||||||
|
const isType = (ext === 'jpeg' || ext === 'jpg' || ext === 'png')
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
|
||||||
|
if (!isJPG || !isType) {
|
||||||
|
this.$message.error('上传头像图片只能是 .jpg、.jpeg、.png 格式!');
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
||||||
|
}
|
||||||
|
return isJPG && isLt2M && isType;
|
||||||
|
},
|
||||||
|
|
||||||
|
//弹窗关闭操作
|
||||||
|
resetForm() {
|
||||||
|
this.$refs['sarStandardsInfoForm'].resetFields();
|
||||||
|
this.imageUrl = ''
|
||||||
|
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.linkListSecond = []
|
||||||
|
this.getLink()
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 编辑
|
||||||
|
this.$http.putData('/sarUrl/tsUrl/edit', {
|
||||||
|
id: this.editId,
|
||||||
|
type: this.sarStandardsInfoEO.type,
|
||||||
|
url: this.sarStandardsInfoEO.url,
|
||||||
|
icon: this.sarStandardsInfoEO.icon
|
||||||
|
}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'Loading'
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.$message.success('修改成功')
|
||||||
|
this.modalshowflag = false
|
||||||
|
this.linkListSecond = []
|
||||||
|
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.sarStandardsInfoEO.icon = row.icon
|
||||||
|
if (row.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: row.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
item.icon = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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
|
||||||
|
res.data.forEach(item=>{
|
||||||
|
if (item.type === 2) {
|
||||||
|
this.linkListSecond.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.linkListSecond.forEach(item=>{
|
||||||
|
if (item.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: item.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
item.icon = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.initSortable()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initSortable() {
|
||||||
|
this.sortData = [...this.linkListSecond]
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
margin-top: 10px;
|
||||||
|
border-color: #409EFF;
|
||||||
|
}
|
||||||
|
.avatar-uploader {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filter-tree {
|
||||||
|
height: calc(~'100% - 50px')
|
||||||
|
}
|
||||||
|
/deep/.el-input.is-disabled .el-input__inner {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,202 +1,234 @@
|
|||||||
<!-- 尾部链接 -->
|
<!-- 尾部链接 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="link" id="link">
|
<div class="link" id="link">
|
||||||
<!-- 此部分暂时这样写，到后面做修改 -->
|
<!-- 此部分暂时这样写，到后面做修改 -->
|
||||||
<div style="display: inline-block;width: 15%;">
|
<div style="display: inline-block;width: 15%;">
|
||||||
<span class="title borderRight">友情链接</span>
|
<span class="title borderRight">友情链接</span>
|
||||||
</div>
|
|
||||||
<div style="display: inline-block;width: 80%;text-align: center">
|
|
||||||
<div>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="http://www.sac.gov.cn/" target="_blank">国标委</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="http://www.catarc.org.cn/" target="_blank">汽标委</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="http://openstd.samr.gov.cn/bzgk/gb/index" target="_blank">国标全文公开</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="http://std.samr.gov.cn/" target="_blank">全国标准信息公共服务</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="http://jtst.mot.gov.cn/" target="_blank">交通部标准信息</a>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="https://www.un.org/zh/aboutun/structure/unece/" target="_blank">欧洲经济委员会</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="https://eur-lex.europa.eu" target="_blank">欧盟</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="https://www.interregs.com/" target="_blank">InterRegs </a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="https://tbt.sist.org.cn/cslm/wtotbttb/" target="_blank">WTO/TBT通报</a>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<span class="borderMiddle"></span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<a style="color: #0068B7;" href="https://www.iso.org/home.html" target="_blank">ISO</a>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: inline-block;width: 15%;">
|
|
||||||
<span class="borderLeft"></span>
|
|
||||||
<span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div>
|
|
||||||
<span class="myLi1 borderRight" v-for="(link, index) in linkList" :key="index" @click="openLinkUrl(link.url)" :title="link.name" >
|
|
||||||
{{ link.name }}
|
|
||||||
</span>
|
|
||||||
<span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span>
|
|
||||||
</div>
|
|
||||||
<div v-show="false">
|
|
||||||
<span class="myLi1 borderRight" v-for="(link, index) in linkList" :key="index" @click="openLinkUrl(link.url)" :title="link.name" >
|
|
||||||
{{ link.name }}
|
|
||||||
</span>
|
|
||||||
<span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span>
|
|
||||||
</div>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style="display: inline-block;width: 80%;text-align: center">
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<span v-for="(item, index) in linkListFirst" :key="index">
|
||||||
|
<el-col :span="4">
|
||||||
|
<img
|
||||||
|
style="height: 10px;width: 10px;margin-bottom: 3px"
|
||||||
|
:src="item.icon"
|
||||||
|
v-if="index < 5">
|
||||||
|
<a v-if="index < 5" style="color: #0068B7;" @click="openLinkUrl(item.url)" target="_blank">
|
||||||
|
{{ item.name }}
|
||||||
|
</a>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1" v-if="index < 4" v-show="true">
|
||||||
|
<span class="borderMiddle"></span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1" v-else v-show="false">
|
||||||
|
<span class="borderMiddle"></span>
|
||||||
|
</el-col>
|
||||||
|
</span>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<span v-for="(item, index) in linkListSecond" :key="index">
|
||||||
|
<el-col :span="4">
|
||||||
|
<img
|
||||||
|
style="height: 10px;width: 10px;margin-bottom: 3px"
|
||||||
|
:src="item.icon"
|
||||||
|
v-if="index < 5">
|
||||||
|
<a v-if="index < 5" style="color: #0068B7;" @click="openLinkUrl(item.url)" target="_blank">
|
||||||
|
{{ item.name }}
|
||||||
|
</a>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1" v-if="index < 4" v-show="true">
|
||||||
|
<span class="borderMiddle"></span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1" v-else v-show="false">
|
||||||
|
<span class="borderMiddle"></span>
|
||||||
|
</el-col>
|
||||||
|
</span>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block;width: 15%;">
|
||||||
|
<span class="borderLeft"></span>
|
||||||
|
<span class="myLi1" @click="$router.push('linkManage')">更多链接 ⋙</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import { getImg } from '@/api/linkApi.js'
|
||||||
name: 'Empennage',
|
export default {
|
||||||
components: {},
|
name: 'Empennage',
|
||||||
mixins: [],
|
components: {},
|
||||||
data() {
|
mixins: [],
|
||||||
return {
|
data() {
|
||||||
linkList: [],
|
return {
|
||||||
width: ''
|
linkListFirst: [],
|
||||||
}
|
linkListSecond: [],
|
||||||
},
|
width: '',
|
||||||
computed: {},
|
verifyImg: '',
|
||||||
watch: {
|
|
||||||
width(val) {
|
|
||||||
console.log(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getLink();
|
|
||||||
this.width = document.getElementById("link").offsetWidth
|
|
||||||
let self = this
|
|
||||||
this.screenWidth = document.body.clientWidth
|
|
||||||
window.onresize = () => {
|
|
||||||
return (() => {
|
|
||||||
console.log(document.body.clientWidth);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 跳转链接
|
|
||||||
openLinkUrl (linkUri) {
|
|
||||||
let getHttp = linkUri.substring(0, 7)
|
|
||||||
let getHttps = linkUri.substring(0, 8)
|
|
||||||
if (getHttp === 'http://' || getHttps === 'https://') {
|
|
||||||
window.open(linkUri)
|
|
||||||
} else {
|
|
||||||
window.open('https://' + linkUri)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 获取链接数据
|
|
||||||
getLink () {
|
|
||||||
var width = document.getElementById("link").offsetWidth
|
|
||||||
this.$http.get('sarUrl/tsUrl', {
|
|
||||||
}, {
|
|
||||||
_this: this,
|
|
||||||
loading: 'Loading'
|
|
||||||
}, res=> {
|
|
||||||
let b = 0
|
|
||||||
let c = 0
|
|
||||||
for (let a = 0; a < res.data.length; a++) {
|
|
||||||
b += res.data[a].name.length * 14 + 100
|
|
||||||
if (b > width) {
|
|
||||||
c = a - 1
|
|
||||||
} else {
|
|
||||||
c = a
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let list
|
|
||||||
list = res.data.slice(0, c)
|
|
||||||
this.linkList = list
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {
|
||||||
|
width(val) {
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLink();
|
||||||
|
/*this.width = document.getElementById("link").offsetWidth
|
||||||
|
let self = this
|
||||||
|
this.screenWidth = document.body.clientWidth
|
||||||
|
window.onresize = () => {
|
||||||
|
return (() => {
|
||||||
|
console.log(document.body.clientWidth);
|
||||||
|
})
|
||||||
|
}*/
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转链接
|
||||||
|
openLinkUrl(linkUri) {
|
||||||
|
let getHttp = linkUri.substring(0, 7)
|
||||||
|
let getHttps = linkUri.substring(0, 8)
|
||||||
|
if (getHttp === 'http://' || getHttps === 'https://') {
|
||||||
|
window.open(linkUri)
|
||||||
|
} else {
|
||||||
|
window.open('https://' + linkUri)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取链接数据
|
||||||
|
getLink() {
|
||||||
|
// var width = document.getElementById("link").offsetWidth
|
||||||
|
this.$http.get('sarUrl/tsUrl', {}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'Loading'
|
||||||
|
}, res => {
|
||||||
|
/* let b = 0
|
||||||
|
let c = 0
|
||||||
|
for (let a = 0; a < res.data.length; a++) {
|
||||||
|
b += res.data[a].name.length * 14 + 100
|
||||||
|
if (b > width) {
|
||||||
|
c = a - 1
|
||||||
|
} else {
|
||||||
|
c = a
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
/*let list
|
||||||
|
list = res.data*/
|
||||||
|
res.data.forEach(item=>{
|
||||||
|
if (item.type === 1) {
|
||||||
|
this.linkListFirst.push(item)
|
||||||
|
} else if(item.type === 2) {
|
||||||
|
this.linkListSecond.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.linkListFirst.forEach(item=>{
|
||||||
|
if (item.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: item.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
item.icon = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.linkListSecond.forEach(item=>{
|
||||||
|
if (item.id !== '') {
|
||||||
|
let imgId = {
|
||||||
|
id: item.id
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
if (res.ok) {
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
item.icon = src
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getImgLink(row) {
|
||||||
|
let imgId = {
|
||||||
|
id: row.icon
|
||||||
|
}
|
||||||
|
getImg(imgId).then(res=>{
|
||||||
|
const src =
|
||||||
|
"data:image/png;base64," +
|
||||||
|
btoa(
|
||||||
|
new Uint8Array(res).reduce(
|
||||||
|
(data, byte) => data + String.fromCharCode(byte), "")
|
||||||
|
)
|
||||||
|
this.verifyImg = src;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.link {
|
.link {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
|
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
|
||||||
.borderRight {
|
|
||||||
//padding-right: 50px;
|
.borderRight {
|
||||||
//margin-right: 50px;
|
//padding-right: 50px;
|
||||||
border-right: 2px dotted #aaa;
|
//margin-right: 50px;
|
||||||
}
|
border-right: 2px dotted #aaa;
|
||||||
.borderLeft {
|
}
|
||||||
margin-right: 50px;
|
|
||||||
//padding-left: 50px;
|
.borderLeft {
|
||||||
//margin-left: 50px;
|
margin-right: 50px;
|
||||||
border-left: 2px dotted #aaa;
|
//padding-left: 50px;
|
||||||
}
|
//margin-left: 50px;
|
||||||
.borderMiddle {
|
border-left: 2px dotted #aaa;
|
||||||
border-left: 2px dotted #aaa;
|
}
|
||||||
}
|
|
||||||
.title {
|
.borderMiddle {
|
||||||
padding-right: 40px;
|
border-left: 2px dotted #aaa;
|
||||||
font-weight: bold;
|
}
|
||||||
padding-left: 40px;
|
|
||||||
width: 80px;
|
.title {
|
||||||
}
|
padding-right: 40px;
|
||||||
.myLi1 {
|
font-weight: bold;
|
||||||
cursor: pointer;
|
padding-left: 40px;
|
||||||
color: #0068B7;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.el-col-4 {
|
|
||||||
white-space: nowrap;
|
.myLi1 {
|
||||||
text-overflow: ellipsis;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
color: #0068B7;
|
||||||
word-break: break-all;
|
}
|
||||||
line-height: normal;
|
|
||||||
margin-top: 10px;
|
.el-col-4 {
|
||||||
font-size: 5px;
|
white-space: nowrap;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
}
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user