5 changed files with 529 additions and 519 deletions
-
2src/router/index.js
-
626src/views/login.vue
-
2src/views/storeManage/listenManage/module/bindCamera.vue
-
5src/views/storeManage/listenManage/videoListen/index.vue
-
413src/views/storeManage/tagManage/bindTagList/index.vue
@ -1,313 +1,313 @@ |
|||||
<template> |
|
||||
<div class="login" :style="'background-image:url(' + Background + ');'"> |
|
||||
<el-form |
|
||||
ref="loginForm" |
|
||||
:model="loginForm" |
|
||||
:rules="loginRules" |
|
||||
label-position="left" |
|
||||
label-width="0px" |
|
||||
class="login-form" |
|
||||
> |
|
||||
<h3 class="title">智能库房综合管理系统</h3> |
|
||||
<el-form-item prop="username"> |
|
||||
<el-input |
|
||||
v-model="loginForm.username" |
|
||||
type="text" |
|
||||
auto-complete="off" |
|
||||
placeholder="登录账号" |
|
||||
> |
|
||||
<svg-icon |
|
||||
slot="prefix" |
|
||||
icon-class="user" |
|
||||
class="el-input__icon input-icon" |
|
||||
/> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="password"> |
|
||||
<el-input |
|
||||
v-model="loginForm.password" |
|
||||
type="password" |
|
||||
auto-complete="off" |
|
||||
placeholder="密码" |
|
||||
@keyup.enter.native="handleLogin" |
|
||||
> |
|
||||
<svg-icon |
|
||||
slot="prefix" |
|
||||
icon-class="password" |
|
||||
class="el-input__icon input-icon" |
|
||||
/> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item class="login-code" prop="code"> |
|
||||
<el-input |
|
||||
v-model="loginForm.code" |
|
||||
auto-complete="off" |
|
||||
placeholder="验证码" |
|
||||
@keyup.enter.native="handleLogin" |
|
||||
> |
|
||||
<svg-icon |
|
||||
slot="prefix" |
|
||||
icon-class="validCode" |
|
||||
class="el-input__icon input-icon" |
|
||||
/> |
|
||||
</el-input> |
|
||||
<div class="code-img"> |
|
||||
<img :src="codeUrl" @click="getCode"> |
|
||||
</div> |
|
||||
</el-form-item> |
|
||||
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0"> |
|
||||
记住我 |
|
||||
</el-checkbox> --> |
|
||||
<el-form-item style="width: 100%"> |
|
||||
<el-button |
|
||||
:loading="loading" |
|
||||
size="medium" |
|
||||
@click.native.prevent="handleLogin" |
|
||||
> |
|
||||
<span v-if="!loading">登 录</span> |
|
||||
<span v-else>登 录 中...</span> |
|
||||
</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<!-- 底部 --> |
|
||||
<div v-if="$store.state.settings.showFooter" id="el-login-footer"> |
|
||||
<span v-html="$store.state.settings.footerTxt" /> |
|
||||
<span> ⋅ </span> |
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ |
|
||||
$store.state.settings.caseNumber |
|
||||
}}</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { encrypt } from '@/utils/rsaEncrypt' |
|
||||
import Config from '@/settings' |
|
||||
import { getCodeImg } from '@/api/login' |
|
||||
import Cookies from 'js-cookie' |
|
||||
import qs from 'qs' |
|
||||
import Background from '@/assets/images/background.jpg' |
|
||||
export default { |
|
||||
name: 'Login', |
|
||||
data() { |
|
||||
return { |
|
||||
Background: Background, |
|
||||
codeUrl: '', |
|
||||
cookiePass: '', |
|
||||
loginForm: { |
|
||||
username: 'admin', |
|
||||
password: '123456', |
|
||||
rememberMe: false, |
|
||||
code: '', |
|
||||
uuid: '' |
|
||||
}, |
|
||||
loginRules: { |
|
||||
username: [ |
|
||||
{ required: true, trigger: 'blur', message: '登录账号不能为空' } |
|
||||
], |
|
||||
password: [ |
|
||||
{ required: true, trigger: 'blur', message: '密码不能为空' } |
|
||||
], |
|
||||
code: [ |
|
||||
{ required: true, trigger: 'change', message: '验证码不能为空' } |
|
||||
] |
|
||||
}, |
|
||||
loading: false, |
|
||||
redirect: undefined |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
$route: { |
|
||||
handler: function(route) { |
|
||||
const data = route.query |
|
||||
if (data && data.redirect) { |
|
||||
this.redirect = data.redirect |
|
||||
delete data.redirect |
|
||||
if (JSON.stringify(data) !== '{}') { |
|
||||
this.redirect = |
|
||||
this.redirect + '&' + qs.stringify(data, { indices: false }) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 获取验证码 |
|
||||
this.getCode() |
|
||||
// 获取用户名密码等Cookie |
|
||||
this.getCookie() |
|
||||
// token 过期提示 |
|
||||
this.point() |
|
||||
}, |
|
||||
methods: { |
|
||||
getCode() { |
|
||||
getCodeImg().then((res) => { |
|
||||
this.codeUrl = res.img |
|
||||
this.loginForm.uuid = res.uuid |
|
||||
}) |
|
||||
}, |
|
||||
getCookie() { |
|
||||
const username = Cookies.get('username') |
|
||||
let password = Cookies.get('password') |
|
||||
const rememberMe = Cookies.get('rememberMe') |
|
||||
// 保存cookie里面的加密后的密码 |
|
||||
this.cookiePass = password === undefined ? '' : password |
|
||||
password = password === undefined ? this.loginForm.password : password |
|
||||
this.loginForm = { |
|
||||
username: username === undefined ? this.loginForm.username : username, |
|
||||
password: password, |
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|
||||
code: '' |
|
||||
} |
|
||||
}, |
|
||||
handleLogin() { |
|
||||
this.$refs.loginForm.validate((valid) => { |
|
||||
const user = { |
|
||||
username: this.loginForm.username, |
|
||||
password: this.loginForm.password, |
|
||||
rememberMe: this.loginForm.rememberMe, |
|
||||
code: this.loginForm.code, |
|
||||
uuid: this.loginForm.uuid |
|
||||
} |
|
||||
if (user.password !== this.cookiePass) { |
|
||||
user.password = encrypt(user.password) |
|
||||
} |
|
||||
if (valid) { |
|
||||
this.loading = true |
|
||||
if (user.rememberMe) { |
|
||||
Cookies.set('username', user.username, { |
|
||||
expires: Config.passCookieExpires |
|
||||
}) |
|
||||
Cookies.set('password', user.password, { |
|
||||
expires: Config.passCookieExpires |
|
||||
}) |
|
||||
Cookies.set('rememberMe', user.rememberMe, { |
|
||||
expires: Config.passCookieExpires |
|
||||
}) |
|
||||
} else { |
|
||||
Cookies.remove('username') |
|
||||
Cookies.remove('password') |
|
||||
Cookies.remove('rememberMe') |
|
||||
} |
|
||||
this.$store |
|
||||
.dispatch('Login', user) |
|
||||
.then(() => { |
|
||||
this.loading = false |
|
||||
this.$router.push({ path: this.redirect || '/' }) |
|
||||
}) |
|
||||
.catch(() => { |
|
||||
this.loading = false |
|
||||
this.getCode() |
|
||||
}) |
|
||||
} else { |
|
||||
console.log('error submit!!') |
|
||||
return false |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
point() { |
|
||||
const point = Cookies.get('point') !== undefined |
|
||||
if (point) { |
|
||||
this.$message({ |
|
||||
message: '当前登录状态已过期，请重新登录！', |
|
||||
type: 'warning', |
|
||||
duration: 5000 |
|
||||
}) |
|
||||
Cookies.remove('point') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss"> |
|
||||
.login { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
height: 100vh; |
|
||||
position: relative; |
|
||||
background-size: cover; |
|
||||
} |
|
||||
.title { |
|
||||
margin-bottom: 30px; |
|
||||
font-size: 30px; |
|
||||
font-weight: 400; |
|
||||
text-align: center; |
|
||||
letter-spacing: 2px; |
|
||||
color: #1e2864; |
|
||||
} |
|
||||
|
|
||||
.login-form { |
|
||||
width: 26%; |
|
||||
padding: 4% 2%; |
|
||||
position: absolute; |
|
||||
left: calc(100vw - 44%); |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
background: #fff; |
|
||||
box-shadow: 0px 0px 16px 1px rgba(83, 83, 83, 0.16); |
|
||||
border-radius: 10px; |
|
||||
|
|
||||
.el-form-item { |
|
||||
width: 100% !important; |
|
||||
height: 50px; |
|
||||
background: #fff; |
|
||||
border-radius: 7px; |
|
||||
.el-form-item__content{ |
|
||||
height: 100%; |
|
||||
.el-input{ |
|
||||
font-size: 16px; |
|
||||
height: 100%; |
|
||||
input{ |
|
||||
height: 100%; |
|
||||
padding: 0 15px 0 40px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.login-code { |
|
||||
.el-form-item__content{ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
.el-input{ |
|
||||
width: 60%; |
|
||||
} |
|
||||
.code-img{ |
|
||||
flex: 1; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.input-icon { |
|
||||
width: 20px; |
|
||||
height: 100%; |
|
||||
margin-left: 2px; |
|
||||
line-height: 50px; |
|
||||
use{ |
|
||||
width: 20px; |
|
||||
height: 23.45px; |
|
||||
} |
|
||||
} |
|
||||
.el-button { |
|
||||
width: 100% !important; |
|
||||
height: 52px; |
|
||||
margin-top: 22px; |
|
||||
font-size: 20px; |
|
||||
background: #1e2864; |
|
||||
border-radius: 5px; |
|
||||
color: #ffffff; |
|
||||
border: none; |
|
||||
} |
|
||||
} |
|
||||
.code-img { |
|
||||
height: 43px; |
|
||||
margin-left: 20px; |
|
||||
display: inline-block; |
|
||||
img { |
|
||||
width: 100%; |
|
||||
height: 100% !important; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
<template> |
||||
|
<div class="login" :style="'background-image:url(' + Background + ');'"> |
||||
|
<el-form |
||||
|
ref="loginForm" |
||||
|
:model="loginForm" |
||||
|
:rules="loginRules" |
||||
|
label-position="left" |
||||
|
label-width="0px" |
||||
|
class="login-form" |
||||
|
> |
||||
|
<h3 class="title">智能库房综合管理系统</h3> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input |
||||
|
v-model="loginForm.username" |
||||
|
type="text" |
||||
|
auto-complete="off" |
||||
|
placeholder="登录账号" |
||||
|
> |
||||
|
<svg-icon |
||||
|
slot="prefix" |
||||
|
icon-class="user" |
||||
|
class="el-input__icon input-icon" |
||||
|
/> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="loginForm.password" |
||||
|
type="password" |
||||
|
auto-complete="off" |
||||
|
placeholder="密码" |
||||
|
@keyup.enter.native="handleLogin" |
||||
|
> |
||||
|
<svg-icon |
||||
|
slot="prefix" |
||||
|
icon-class="password" |
||||
|
class="el-input__icon input-icon" |
||||
|
/> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="login-code" prop="code"> |
||||
|
<el-input |
||||
|
v-model="loginForm.code" |
||||
|
auto-complete="off" |
||||
|
placeholder="验证码" |
||||
|
@keyup.enter.native="handleLogin" |
||||
|
> |
||||
|
<svg-icon |
||||
|
slot="prefix" |
||||
|
icon-class="validCode" |
||||
|
class="el-input__icon input-icon" |
||||
|
/> |
||||
|
</el-input> |
||||
|
<div class="code-img"> |
||||
|
<img :src="codeUrl" @click="getCode"> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0"> |
||||
|
记住我 |
||||
|
</el-checkbox> --> |
||||
|
<el-form-item style="width: 100%"> |
||||
|
<el-button |
||||
|
:loading="loading" |
||||
|
size="medium" |
||||
|
@click.native.prevent="handleLogin" |
||||
|
> |
||||
|
<span v-if="!loading">登 录</span> |
||||
|
<span v-else>登 录 中...</span> |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<!-- 底部 --> |
||||
|
<div v-if="$store.state.settings.showFooter" id="el-login-footer"> |
||||
|
<span v-html="$store.state.settings.footerTxt" /> |
||||
|
<span> ⋅ </span> |
||||
|
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ |
||||
|
$store.state.settings.caseNumber |
||||
|
}}</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { encrypt } from '@/utils/rsaEncrypt' |
||||
|
import Config from '@/settings' |
||||
|
import { getCodeImg } from '@/api/login' |
||||
|
import Cookies from 'js-cookie' |
||||
|
import qs from 'qs' |
||||
|
import Background from '@/assets/images/background.jpg' |
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
return { |
||||
|
Background: Background, |
||||
|
codeUrl: '', |
||||
|
cookiePass: '', |
||||
|
loginForm: { |
||||
|
username: 'admin', |
||||
|
password: '', |
||||
|
rememberMe: false, |
||||
|
code: '', |
||||
|
uuid: '' |
||||
|
}, |
||||
|
loginRules: { |
||||
|
username: [ |
||||
|
{ required: true, trigger: 'blur', message: '登录账号不能为空' } |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, trigger: 'blur', message: '密码不能为空' } |
||||
|
], |
||||
|
code: [ |
||||
|
{ required: true, trigger: 'change', message: '验证码不能为空' } |
||||
|
] |
||||
|
}, |
||||
|
loading: false, |
||||
|
redirect: undefined |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
$route: { |
||||
|
handler: function(route) { |
||||
|
const data = route.query |
||||
|
if (data && data.redirect) { |
||||
|
this.redirect = data.redirect |
||||
|
delete data.redirect |
||||
|
if (JSON.stringify(data) !== '{}') { |
||||
|
this.redirect = |
||||
|
this.redirect + '&' + qs.stringify(data, { indices: false }) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 获取验证码 |
||||
|
this.getCode() |
||||
|
// 获取用户名密码等Cookie |
||||
|
this.getCookie() |
||||
|
// token 过期提示 |
||||
|
this.point() |
||||
|
}, |
||||
|
methods: { |
||||
|
getCode() { |
||||
|
getCodeImg().then((res) => { |
||||
|
this.codeUrl = res.img |
||||
|
this.loginForm.uuid = res.uuid |
||||
|
}) |
||||
|
}, |
||||
|
getCookie() { |
||||
|
const username = Cookies.get('username') |
||||
|
let password = Cookies.get('password') |
||||
|
const rememberMe = Cookies.get('rememberMe') |
||||
|
// 保存cookie里面的加密后的密码 |
||||
|
this.cookiePass = password === undefined ? '' : password |
||||
|
password = password === undefined ? this.loginForm.password : password |
||||
|
this.loginForm = { |
||||
|
username: username === undefined ? this.loginForm.username : username, |
||||
|
password: password, |
||||
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
||||
|
code: '' |
||||
|
} |
||||
|
}, |
||||
|
handleLogin() { |
||||
|
this.$refs.loginForm.validate((valid) => { |
||||
|
const user = { |
||||
|
username: this.loginForm.username, |
||||
|
password: this.loginForm.password, |
||||
|
rememberMe: this.loginForm.rememberMe, |
||||
|
code: this.loginForm.code, |
||||
|
uuid: this.loginForm.uuid |
||||
|
} |
||||
|
if (user.password !== this.cookiePass) { |
||||
|
user.password = encrypt(user.password) |
||||
|
} |
||||
|
if (valid) { |
||||
|
this.loading = true |
||||
|
if (user.rememberMe) { |
||||
|
Cookies.set('username', user.username, { |
||||
|
expires: Config.passCookieExpires |
||||
|
}) |
||||
|
Cookies.set('password', user.password, { |
||||
|
expires: Config.passCookieExpires |
||||
|
}) |
||||
|
Cookies.set('rememberMe', user.rememberMe, { |
||||
|
expires: Config.passCookieExpires |
||||
|
}) |
||||
|
} else { |
||||
|
Cookies.remove('username') |
||||
|
Cookies.remove('password') |
||||
|
Cookies.remove('rememberMe') |
||||
|
} |
||||
|
this.$store |
||||
|
.dispatch('Login', user) |
||||
|
.then(() => { |
||||
|
this.loading = false |
||||
|
this.$router.push({ path: this.redirect || '/' }) |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false |
||||
|
this.getCode() |
||||
|
}) |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
point() { |
||||
|
const point = Cookies.get('point') !== undefined |
||||
|
if (point) { |
||||
|
this.$message({ |
||||
|
message: '当前登录状态已过期，请重新登录！', |
||||
|
type: 'warning', |
||||
|
duration: 5000 |
||||
|
}) |
||||
|
Cookies.remove('point') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss"> |
||||
|
.login { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.title { |
||||
|
margin-bottom: 30px; |
||||
|
font-size: 30px; |
||||
|
font-weight: 400; |
||||
|
text-align: center; |
||||
|
letter-spacing: 2px; |
||||
|
color: #1e2864; |
||||
|
} |
||||
|
|
||||
|
.login-form { |
||||
|
width: 26%; |
||||
|
padding: 4% 2%; |
||||
|
position: absolute; |
||||
|
left: calc(100vw - 44%); |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 0px 16px 1px rgba(83, 83, 83, 0.16); |
||||
|
border-radius: 10px; |
||||
|
|
||||
|
.el-form-item { |
||||
|
width: 100% !important; |
||||
|
height: 50px; |
||||
|
background: #fff; |
||||
|
border-radius: 7px; |
||||
|
.el-form-item__content{ |
||||
|
height: 100%; |
||||
|
.el-input{ |
||||
|
font-size: 16px; |
||||
|
height: 100%; |
||||
|
input{ |
||||
|
height: 100%; |
||||
|
padding: 0 15px 0 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.login-code { |
||||
|
.el-form-item__content{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.el-input{ |
||||
|
width: 60%; |
||||
|
} |
||||
|
.code-img{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.input-icon { |
||||
|
width: 20px; |
||||
|
height: 100%; |
||||
|
margin-left: 2px; |
||||
|
line-height: 50px; |
||||
|
use{ |
||||
|
width: 20px; |
||||
|
height: 23.45px; |
||||
|
} |
||||
|
} |
||||
|
.el-button { |
||||
|
width: 100% !important; |
||||
|
height: 52px; |
||||
|
margin-top: 22px; |
||||
|
font-size: 20px; |
||||
|
background: #1e2864; |
||||
|
border-radius: 5px; |
||||
|
color: #ffffff; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
.code-img { |
||||
|
height: 43px; |
||||
|
margin-left: 20px; |
||||
|
display: inline-block; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100% !important; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,203 +1,210 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div class="head-container header"> |
|
||||
<div class="head-left"> |
|
||||
<el-select slot="prepend" v-model="query.isType" class="filter-item" style="width: 130px;height:30px;margin-right:10px" @change="initData"> |
|
||||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 250px;" class="input-prepend filter-item" @keyup.enter.native="initData"> |
|
||||
<el-select slot="prepend" v-model="inputSelect" style="width: 100px;"> |
|
||||
<el-option v-for="item in queryOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-input> |
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="initData">搜索</el-button> |
|
||||
</div> |
|
||||
<div class="archives-handler-btn"> |
|
||||
<!-- iconfont icon-weibiaoti-2 --> |
|
||||
<el-button class="lending-btn" type="primary" :loading="unbindBtnLoading" :disabled="selections.length === 0" @click="unbind()"> |
|
||||
<svg-icon icon-class="remove_bind" class-name="svg-style" style="margin-right:8px" />解除绑定 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-table ref="table" v-loading="loading" :data="bindTagList" style="width: 100%;" height="calc(100vh - 357px)" @row-click="clickRowHandler" @selection-change="selectionChangeHandler"> |
|
||||
<el-table-column type="selection" width="55" align="center" /> |
|
||||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
||||
<el-table-column prop="tid" label="TID" align="center" /> |
|
||||
<el-table-column label="绑定对象" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span v-if="scope.row.isType === 1">档案</span> |
|
||||
<span v-if="scope.row.isType === 2">档案盒</span> |
|
||||
<span v-if="scope.row.isType === 3">层架位</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="title" label="标签名称" align="center" /> |
|
||||
<el-table-column prop="update_time" width="175" label="操作时间" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div>{{ scope.row.update_time | parseTime }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" /> |
|
||||
<el-dialog title="解除绑定" :visible.sync="unbindVisible"> |
|
||||
<span class="dialog-right-top" /> |
|
||||
<span class="dialog-left-bottom" /> |
|
||||
<div class="setting-dialog"> |
|
||||
<div class="dialog-delt"> |
|
||||
<p><span>确定解除当前选中标签吗？</span></p> |
|
||||
</div> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
<!--删除对话框组件--> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { initTagList, unbindTag } from '@/api/storeManage/tagManage/bindTagList' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
selections: [], |
|
||||
bindTagList: [], |
|
||||
loading: false, |
|
||||
page: { |
|
||||
total: 0, |
|
||||
size: 10, |
|
||||
page: 1 |
|
||||
}, |
|
||||
query: { |
|
||||
isType: 0, |
|
||||
tid: '', |
|
||||
query: '' |
|
||||
}, |
|
||||
typeOptions: [ |
|
||||
{ |
|
||||
label: '全部', |
|
||||
value: 0 |
|
||||
}, |
|
||||
{ |
|
||||
label: '档案', |
|
||||
value: 1 |
|
||||
}, |
|
||||
{ |
|
||||
label: '档案盒', |
|
||||
value: 2 |
|
||||
}, |
|
||||
{ |
|
||||
label: '层位', |
|
||||
value: 3 |
|
||||
} |
|
||||
], |
|
||||
inputSelect: 'tid', |
|
||||
queryOptions: [ |
|
||||
{ |
|
||||
label: 'TID', |
|
||||
value: 'tid' |
|
||||
}, |
|
||||
{ |
|
||||
label: '标签名称', |
|
||||
value: 'query' |
|
||||
} |
|
||||
], |
|
||||
unbindVisible: false, |
|
||||
unbindBtnLoading: false |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.initData() |
|
||||
}, |
|
||||
methods: { |
|
||||
initData() { |
|
||||
this.loading = true |
|
||||
initTagList(this.getQueryParams()).then((data) => { |
|
||||
this.bindTagList = data.content |
|
||||
this.page.total = data.totalElements |
|
||||
this.loading = false |
|
||||
console.log(data) |
|
||||
}) |
|
||||
}, |
|
||||
getQueryParams() { |
|
||||
Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => { |
|
||||
if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined |
|
||||
}) |
|
||||
const params = { |
|
||||
page: this.page.page - 1, |
|
||||
size: this.page.size, |
|
||||
...this.query |
|
||||
} |
|
||||
if (params.isType === 0) { |
|
||||
params.isType = undefined |
|
||||
} |
|
||||
return params |
|
||||
}, |
|
||||
clickRowHandler(row) { |
|
||||
this.$refs.table.toggleRowSelection(row) |
|
||||
}, |
|
||||
unbind() { |
|
||||
this.unbindVisible = true |
|
||||
}, |
|
||||
// 每页条数改变 |
|
||||
sizeChangeHandler(e) { |
|
||||
this.page.size = e |
|
||||
this.page.page = 1 |
|
||||
this.initData() |
|
||||
}, |
|
||||
// 当前页改变 |
|
||||
pageChangeHandler(e) { |
|
||||
this.page.page = e |
|
||||
this.initData() |
|
||||
}, |
|
||||
selectionChangeHandler(val) { |
|
||||
this.selections = val |
|
||||
}, |
|
||||
handleConfirm() { |
|
||||
console.log(1) |
|
||||
this.unbindVisible = false |
|
||||
this.unbindBtnLoading = true |
|
||||
const unbindData = this.selections.map((item) => { |
|
||||
return { |
|
||||
labelType: item.isType, |
|
||||
tid: item.tid |
|
||||
} |
|
||||
}) |
|
||||
unbindTag(unbindData).then((res) => { |
|
||||
this.unbindBtnLoading = false |
|
||||
this.$message({ |
|
||||
message: '解除绑定成功', |
|
||||
type: 'success', |
|
||||
duration: 2500 |
|
||||
}) |
|
||||
this.initData() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@import "~@/assets/styles/archives-manage.scss"; |
|
||||
.header { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding-top: 0; |
|
||||
margin-top: -10px; |
|
||||
.head-left { |
|
||||
.el-button { |
|
||||
margin-left: -10px; |
|
||||
background-color: #3a99fd; |
|
||||
&:hover { |
|
||||
background-color: #02255f; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.archives-handler-btn .el-button { |
|
||||
height: 30px; |
|
||||
width: 106px; |
|
||||
} |
|
||||
::v-deep .input-prepend .el-input__inner { |
|
||||
padding-left: 100px; |
|
||||
} |
|
||||
</style> |
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container header"> |
||||
|
<div class="head-left"> |
||||
|
<el-select slot="prepend" v-model="query.isType" class="filter-item" style="width: 130px;height:30px;margin-right:10px" @change="initData"> |
||||
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
<el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 250px;" class="input-prepend filter-item" @keyup.enter.native="initData"> |
||||
|
<el-select slot="prepend" v-model="inputSelect" style="width: 100px;"> |
||||
|
<el-option v-for="item in queryOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="initData">搜索</el-button> |
||||
|
</div> |
||||
|
<div class="archives-handler-btn"> |
||||
|
<!-- iconfont icon-weibiaoti-2 --> |
||||
|
<el-button class="lending-btn iconfont icon-jiechubangding-fanbai" type="primary" size="mini" :loading="unbindBtnLoading" :disabled="selections.length === 0" @click="unbind()"> |
||||
|
<!-- <svg-icon icon-class="remove_bind" class-name="svg-style" style="margin-right:8px" /> --> |
||||
|
解除绑定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table ref="table" v-loading="loading" :data="bindTagList" style="width: 100%;" height="calc(100vh - 357px)" @row-click="clickRowHandler" @selection-change="selectionChangeHandler"> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
||||
|
<el-table-column prop="tid" label="TID" align="center" /> |
||||
|
<el-table-column label="绑定对象" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.isType === 1">档案</span> |
||||
|
<span v-if="scope.row.isType === 2">档案盒</span> |
||||
|
<span v-if="scope.row.isType === 3">层架位</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="title" label="标签名称" align="center" /> |
||||
|
<el-table-column prop="update_time" width="175" label="操作时间" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.update_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" /> |
||||
|
<el-dialog title="解除绑定" :visible.sync="unbindVisible"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>确定解除当前选中标签吗？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
<!--删除对话框组件--> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { initTagList, unbindTag } from '@/api/storeManage/tagManage/bindTagList' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
selections: [], |
||||
|
bindTagList: [], |
||||
|
loading: false, |
||||
|
page: { |
||||
|
total: 0, |
||||
|
size: 10, |
||||
|
page: 1 |
||||
|
}, |
||||
|
query: { |
||||
|
isType: 0, |
||||
|
tid: '', |
||||
|
query: '' |
||||
|
}, |
||||
|
typeOptions: [ |
||||
|
{ |
||||
|
label: '全部', |
||||
|
value: 0 |
||||
|
}, |
||||
|
{ |
||||
|
label: '档案', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '档案盒', |
||||
|
value: 2 |
||||
|
}, |
||||
|
{ |
||||
|
label: '层位', |
||||
|
value: 3 |
||||
|
} |
||||
|
], |
||||
|
inputSelect: 'tid', |
||||
|
queryOptions: [ |
||||
|
{ |
||||
|
label: 'TID', |
||||
|
value: 'tid' |
||||
|
}, |
||||
|
{ |
||||
|
label: '标签名称', |
||||
|
value: 'query' |
||||
|
} |
||||
|
], |
||||
|
unbindVisible: false, |
||||
|
unbindBtnLoading: false |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.initData() |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
this.loading = true |
||||
|
initTagList(this.getQueryParams()).then((data) => { |
||||
|
this.bindTagList = data.content |
||||
|
this.page.total = data.totalElements |
||||
|
this.loading = false |
||||
|
console.log(data) |
||||
|
}) |
||||
|
}, |
||||
|
getQueryParams() { |
||||
|
Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => { |
||||
|
if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined |
||||
|
}) |
||||
|
const params = { |
||||
|
page: this.page.page - 1, |
||||
|
size: this.page.size, |
||||
|
...this.query |
||||
|
} |
||||
|
if (params.isType === 0) { |
||||
|
params.isType = undefined |
||||
|
} |
||||
|
return params |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
unbind() { |
||||
|
this.unbindVisible = true |
||||
|
}, |
||||
|
// 每页条数改变 |
||||
|
sizeChangeHandler(e) { |
||||
|
this.page.size = e |
||||
|
this.page.page = 1 |
||||
|
this.initData() |
||||
|
}, |
||||
|
// 当前页改变 |
||||
|
pageChangeHandler(e) { |
||||
|
this.page.page = e |
||||
|
this.initData() |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
console.log(1) |
||||
|
this.unbindVisible = false |
||||
|
this.unbindBtnLoading = true |
||||
|
const unbindData = this.selections.map((item) => { |
||||
|
return { |
||||
|
labelType: item.isType, |
||||
|
tid: item.tid |
||||
|
} |
||||
|
}) |
||||
|
unbindTag(unbindData).then((res) => { |
||||
|
this.unbindBtnLoading = false |
||||
|
this.$message({ |
||||
|
message: '解除绑定成功', |
||||
|
type: 'success', |
||||
|
duration: 2500 |
||||
|
}) |
||||
|
this.initData() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 0; |
||||
|
margin-top: -10px; |
||||
|
.head-left { |
||||
|
.el-button { |
||||
|
margin-left: -10px; |
||||
|
background-color: #3a99fd; |
||||
|
&:hover { |
||||
|
background-color: #02255f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.archives-handler-btn .el-button { |
||||
|
// height: 30px; |
||||
|
width: 106px; |
||||
|
::v-deep span{ |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
&::before { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .input-prepend .el-input__inner { |
||||
|
padding-left: 100px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue