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