parent
0b59110f2e
commit
c8d89bc37b
@ -0,0 +1,8 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function login () {
|
||||
return request({
|
||||
url: '/api/mobile/user/login',
|
||||
|
||||
})
|
||||
}
|
||||
@ -1,15 +1,18 @@
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import router from '@/router'
|
||||
const TokenKey = 'difficult_employee_query_token'
|
||||
|
||||
const TokenKsy_h5 = 'difficult_employee_query_token_h5'
|
||||
export function getToken() {
|
||||
return Cookies.get(TokenKey)
|
||||
let flag = /^\/h5.*/.test(router.currentRoute.path)
|
||||
return Cookies.get(flag ? TokenKsy_h5 : TokenKey)
|
||||
}
|
||||
|
||||
export function setToken(token) {
|
||||
return Cookies.set(TokenKey, token)
|
||||
let flag = /^\/h5.*/.test(router.currentRoute.path)
|
||||
return Cookies.set(flag ? TokenKsy_h5 : TokenKey, token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return Cookies.remove(TokenKey)
|
||||
let flag = /^\/h5.*/.test(router.currentRoute.path)
|
||||
return Cookies.remove(flag ? TokenKsy_h5 : TokenKey)
|
||||
}
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<h3>苏州市总工会</h3>
|
||||
<h3>在档困难职工查询系统</h3>
|
||||
|
||||
<h5>请输入留档信息登录</h5>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<el-form :model="form" label-position="top" size="mini">
|
||||
<el-form-item v-for="(value,key) in form" :label="formLabel[key]">
|
||||
<el-input v-model="form[key]" clearable :placeholder="'请输入'+formLabel[key]"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Button long type="primary" size="small">确 认</Button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>2023 苏州市总工会</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
idcard: '',
|
||||
mobile: '',
|
||||
verify: '',
|
||||
},
|
||||
formLabel: {
|
||||
name: '姓名',
|
||||
idcard: '身份证号',
|
||||
mobile: '手机号码',
|
||||
verify: '验证码'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
color: rgb(86, 141, 205);
|
||||
text-align: center;
|
||||
|
||||
& > h5 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="panel">
|
||||
<div class="logo">
|
||||
<img src="../../../../assets/logo-mini.png" alt="">
|
||||
<h2>苏州总工会</h2>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h2>苏州市总工会</h2>
|
||||
<h2>在档困难职工查询系统</h2>
|
||||
|
||||
<h5>请输入留档信息登录</h5>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<el-form ref="elForm" hide-required-asterisk :model="form" :rules="rules" label-position="top" size="small">
|
||||
<el-form-item v-for="(value,key) in form" :prop="key" :label="formLabel[key]">
|
||||
<el-input v-model="form[key]"
|
||||
clearable
|
||||
:placeholder="'请输入'+formLabel[key]">
|
||||
<template #append v-if="key === 'mobile'">
|
||||
<el-button :disabled="isVerify" @click="sendVerify">
|
||||
{{ time ? time+'秒重新获取' : '发送验证码'}}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="padding-top: 10px;">
|
||||
<Button :loading="isLoading" long type="primary" @click="login">确 认</Button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="footer">2023 © 苏州市总工会</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
idcard: '',
|
||||
mobile: '',
|
||||
verify: '',
|
||||
},
|
||||
formLabel: {
|
||||
name: '姓名',
|
||||
idcard: '身份证号',
|
||||
mobile: '手机号码',
|
||||
verify: '验证码'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
idcard: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入身份证号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator:(rule, value, callback) => {
|
||||
const regID18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||||
const regID15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
|
||||
if (regID18.test(value) || regID15.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('身份证号格式错误'))
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator:(rule, value, callback) => {
|
||||
const reg = /^1[3456789]\d{9}$/;
|
||||
if (reg.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('手机号格式错误'))
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
verify: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
isLoading: false,
|
||||
isVerify: false,
|
||||
timer: null,
|
||||
time: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendVerify () {
|
||||
if (this.isVerify) return
|
||||
this.$refs['elForm'].validateField('mobile',(res) => {
|
||||
if (!res) {
|
||||
this.time = 60;
|
||||
this.isVerify = true;
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
this.time > 0 ? (this.time--) : (clearInterval(this.timer),this.isVerify = false)
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
login () {
|
||||
this.$refs['elForm'].validate((res) => {
|
||||
if (res) {
|
||||
this.isLoading = true;
|
||||
|
||||
setTimeout(() => this.isLoading = false,3000)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
color: $primaryColor;
|
||||
text-align: center;
|
||||
|
||||
margin-bottom: 4vh;
|
||||
& > h5 {
|
||||
color: #999;
|
||||
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #9ba6ac;
|
||||
transform: translateX(-50%);
|
||||
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
}
|
||||
::v-deep .el-form--label-top .el-form-item__label {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
::v-deep .el-input-group__append > button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
color: #fff;
|
||||
transition: all .2s;
|
||||
|
||||
&:not([disabled^=disabled]) {
|
||||
background: #de6d48;
|
||||
}
|
||||
}
|
||||
::v-deep .el-button.is-disabled {
|
||||
background: #999;
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.panel {
|
||||
|
||||
padding: 0 20px;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.panel {
|
||||
|
||||
padding: 0 40px;
|
||||
}
|
||||
.title {
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
& > h2 {
|
||||
color: $primaryColor;
|
||||
}
|
||||
& > img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="body">
|
||||
<loginPanel class="login-panel"></loginPanel>
|
||||
|
||||
<div class="bkg">
|
||||
<div class="words">
|
||||
<h2>欢迎使用本平台</h2>
|
||||
<div>
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M470.9888 261.77536l0 98.54976c0 13.3632-10.83392 24.19712-24.19712 24.19712-47.68768 0-73.6256 48.90624-77.21984 145.43872l77.21984 0c13.3632 0 24.19712 10.84416 24.19712 24.19712l0 208.0768c0 13.3632-10.83392 24.19712-24.19712 24.19712L240.90624 786.432c-13.37344 0-24.19712-10.84416-24.19712-24.19712l0-208.0768c0-46.27456 4.6592-88.73984 13.84448-126.22848 9.4208-38.44096 23.87968-72.04864 42.96704-99.90144 19.64032-28.6208 44.20608-51.07712 73.02144-66.72384 29.00992-15.73888 62.74048-23.72608 100.25984-23.72608C460.15488 237.57824 470.9888 248.41216 470.9888 261.77536zM783.09376 384.52224c13.3632 0 24.19712-10.84416 24.19712-24.19712l0-98.54976c0-13.3632-10.83392-24.19712-24.19712-24.19712-37.50912 0-71.23968 7.9872-100.2496 23.72608-28.81536 15.64672-53.39136 38.10304-73.03168 66.72384-19.08736 27.8528-33.54624 61.46048-42.96704 99.91168-9.17504 37.49888-13.83424 79.96416-13.83424 126.21824l0 208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712l205.8752 0c13.3632 0 24.19712-10.84416 24.19712-24.19712l0-208.0768c0-13.3632-10.83392-24.19712-24.19712-24.19712L706.9696 529.96096C710.51264 433.42848 736.07168 384.52224 783.09376 384.52224z" fill="#ffffff"></path></svg>
|
||||
<span>本平台为在档困难职工提供证明查询和打印</span>
|
||||
<svg viewBox="0 0 1024 1024" ><path d="M553.0112 762.23488l0-98.54976c0-13.3632 10.84416-24.19712 24.19712-24.19712 47.68768 0 73.6256-48.896 77.21984-145.42848l-77.21984 0c-13.3632 0-24.19712-10.84416-24.19712-24.19712l0-208.0768c0-13.3632 10.84416-24.19712 24.19712-24.19712l205.88544 0c13.3632 0 24.19712 10.84416 24.19712 24.19712l0 208.0768c0 46.27456-4.66944 88.7296-13.83424 126.22848-9.4208 38.44096-23.87968 72.04864-42.97728 99.90144-19.63008 28.6208-44.20608 51.07712-73.0112 66.72384-29.02016 15.73888-62.75072 23.72608-100.27008 23.72608C563.84512 786.432 553.0112 775.58784 553.0112 762.23488zM240.90624 639.47776c-13.3632 0-24.19712 10.84416-24.19712 24.19712l0 98.54976c0 13.3632 10.83392 24.19712 24.19712 24.19712 37.49888 0 71.24992-7.9872 100.2496-23.72608 28.81536-15.64672 53.39136-38.0928 73.02144-66.72384 19.0976-27.8528 33.55648-61.46048 42.97728-99.92192 9.17504-37.49888 13.83424-79.95392 13.83424-126.208l0-208.0768c0-13.3632-10.84416-24.19712-24.19712-24.19712L240.90624 237.568c-13.3632 0-24.19712 10.84416-24.19712 24.19712l0 208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712l76.1344 0C313.48736 590.58176 287.91808 639.47776 240.90624 639.47776z" fill="#ffffff"></path></svg>
|
||||
</div>
|
||||
<h5>-苏州市总工会-</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loginPanel from "./component/loginPanel.vue";
|
||||
export default {
|
||||
components: {
|
||||
loginPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.login-panel {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.login-panel {
|
||||
width: 100%;
|
||||
}
|
||||
.bkg {
|
||||
display: none;
|
||||
}
|
||||
.words {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.login-panel {
|
||||
width: 34vw;
|
||||
box-shadow: 1px 0 10px 8px rgba(0,0,0,.04);
|
||||
}
|
||||
.bkg {
|
||||
height: 100%;
|
||||
width: 66vw;
|
||||
float: right;
|
||||
background: url("../../../assets/bg.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
position: relative;
|
||||
|
||||
.words {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
|
||||
& > div {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
word-break: keep-all;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding: 4px 0;
|
||||
& > span {
|
||||
|
||||
padding: 0 8px;
|
||||
}
|
||||
& > svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader
|
||||
icon="md-apps"
|
||||
:text="$route.meta.title"
|
||||
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
||||
>
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<header-content :auths="auths_auth_mixin">
|
||||
<template #search>
|
||||
<div style="display: flex">
|
||||
<Select
|
||||
v-model="select.filter[0].key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="select.filter[0].op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
!columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(select.filter[0].key)"
|
||||
:key="item.id"
|
||||
:value="getColumnField(select.filter[0].key)._relations ? item[getColumnField(select.filter[0].key)._relations.foreign_key] : item.value"
|
||||
>{{
|
||||
item.key || item.value || item.name || item.no || item.mingcheng || item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, select.filter[0])"
|
||||
/>
|
||||
<span
|
||||
style="
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>至</span
|
||||
>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, select.filter[0])"
|
||||
/>
|
||||
</template>
|
||||
<Button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
@click="$refs['xyTable'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
|
||||
<xy-selectors
|
||||
style="margin-left: 10px"
|
||||
@reset="reset"
|
||||
@search="$refs['xyTable'].getTableData(true)"
|
||||
>
|
||||
<template>
|
||||
<div class="select">
|
||||
<div
|
||||
class="select__item"
|
||||
v-for="(item, index) in select.filter"
|
||||
:key="`${item.value}-${index}`"
|
||||
>
|
||||
<p>条件{{ index + 1 }}</p>
|
||||
<Select
|
||||
v-model="item.key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="item.op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
item.op !== 'range' && !columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
item.op !== 'range' && columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(item.key)"
|
||||
:key="item.id"
|
||||
:value="getColumnField(item.key)._relations ? item[getColumnField(item.key)._relations.foreign_key] : item.value"
|
||||
>{{
|
||||
item.key || item.value || item.name || item.no || item.mingcheng || item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="item.value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, item)"
|
||||
/>
|
||||
<span style="margin-left: 10px">至</span>
|
||||
<Input
|
||||
:value="item.value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, item)"
|
||||
/>
|
||||
</template>
|
||||
<el-button
|
||||
v-if="index !== 0"
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
style="margin-left: 10px"
|
||||
@click="select.filter.splice(index, 1)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="
|
||||
select.filter.push({ key: '', op: '', value: '' })
|
||||
"
|
||||
></el-button>
|
||||
<span>新增一条</span>
|
||||
</div>
|
||||
</template>
|
||||
</xy-selectors>
|
||||
</div>
|
||||
</template>
|
||||
<template #create>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="
|
||||
$refs['dialog'].setType('add'), $refs['dialog'].show()
|
||||
"
|
||||
>新增</Button
|
||||
>
|
||||
</template>
|
||||
<template #import>
|
||||
<Button type="primary" @click="$refs['imports'].show()"
|
||||
>导入</Button
|
||||
>
|
||||
</template>
|
||||
<template #export>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="exportExcel(new Date().getTime().toString())"
|
||||
>导出</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
<xy-table
|
||||
:auths="auths_auth_mixin"
|
||||
:delay-req="true"
|
||||
:destroy-action="destroy"
|
||||
ref="xyTable"
|
||||
:border="true"
|
||||
:action="index"
|
||||
:req-opt="select"
|
||||
:destroy-req-opt="select"
|
||||
:table-item="table"
|
||||
@detail="
|
||||
(row) => {
|
||||
$router.push({
|
||||
path: $route.path + '/detail/' + row.id
|
||||
})
|
||||
}
|
||||
"
|
||||
@editor="
|
||||
(row) => {
|
||||
$refs['dialog'].setId(row.id);
|
||||
$refs['dialog'].setType('editor');
|
||||
$refs['dialog'].show();
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #print="{ row }">
|
||||
<Button size="small" type="primary">打印</Button>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
<add ref="dialog"
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
@refresh="$refs['xyTable'].getTableData()">
|
||||
</add>
|
||||
<drawer
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
ref="drawer"
|
||||
></drawer>
|
||||
<imports
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
ref="imports"
|
||||
@refresh="$refs['xyTable'].getTableData()"
|
||||
></imports>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index as fieldIndex } from "@/api/system/customFormField";
|
||||
import { authMixin } from "@/mixin/authMixin";
|
||||
import { index, destroy } from "@/api/system/baseForm";
|
||||
import { op } from "@/const/op";
|
||||
import { download } from "@/utils/downloadRequest";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
import { show } from "@/api/system/customForm";
|
||||
import * as XLSX from "xlsx";
|
||||
import { saveAs } from "file-saver";
|
||||
import { listdept } from "@/api/system/department"
|
||||
|
||||
import add from "./component/add.vue";
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import drawer from "@/views/component/drawer.vue";
|
||||
import imports from "@/views/component/imports.vue";
|
||||
export default {
|
||||
components: {
|
||||
LxHeader,
|
||||
headerContent,
|
||||
drawer,
|
||||
imports,
|
||||
add
|
||||
},
|
||||
mixins: [authMixin],
|
||||
provide: {
|
||||
formStore: () => this.form,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
op,
|
||||
select: {
|
||||
table_name: "",
|
||||
filter: [
|
||||
{
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
form: [],
|
||||
table: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
destroy,
|
||||
download,
|
||||
reset() {
|
||||
this.select.filter.splice(1);
|
||||
this.select.filter[0] = {
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
};
|
||||
},
|
||||
|
||||
async exportExcel(sheetName) {
|
||||
const res = await index(
|
||||
Object.assign(this.select, { page: 1, page_size: 9999 })
|
||||
);
|
||||
if (res.data) {
|
||||
let headers = this.form.map((i) => {
|
||||
return {
|
||||
key: i.field,
|
||||
title: i.name,
|
||||
};
|
||||
});
|
||||
const data = res.data.map((row) =>
|
||||
headers.map((header) => row[header.key])
|
||||
);
|
||||
data.unshift(headers.map((header) => header.title));
|
||||
const wb = XLSX.utils.book_new();
|
||||
const ws = XLSX.utils.aoa_to_sheet(data);
|
||||
XLSX.utils.book_append_sheet(wb, ws, sheetName);
|
||||
const wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array",
|
||||
});
|
||||
saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`${sheetName}.xlsx`
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
//target要为内存地址引用类型
|
||||
inputStartHandler(e, target) {
|
||||
let temp = target?.value.split(",")[1];
|
||||
target.value = `${e},${temp ? temp : ""}`;
|
||||
},
|
||||
inputEndHandler(e, target) {
|
||||
let temp = target?.value.split(",")[0];
|
||||
target.value = `${temp ? temp : ""},${e}`;
|
||||
},
|
||||
|
||||
async getFormDetail() {
|
||||
if (this.$route.meta.params?.custom_form) {
|
||||
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
||||
try {
|
||||
let custom_form = JSON.parse(decode);
|
||||
this.customForm.customFormId = custom_form.custom_form_id;
|
||||
this.customForm.tableName = custom_form.table_name;
|
||||
this.select.table_name = custom_form.table_name;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await show({ id: this.customForm.customFormId }, false);
|
||||
|
||||
//字段处理
|
||||
//初始表白名单
|
||||
let baseTable = new Map([
|
||||
['departments', async () => {
|
||||
const res = await listdept()
|
||||
return res
|
||||
}],
|
||||
['admins',[]]
|
||||
])
|
||||
let { fields, relation } = res;
|
||||
let fieldRes = fields.sort((a,b) => a.sort - b.sort)
|
||||
if (
|
||||
!fields ||
|
||||
!relation ||
|
||||
!fields instanceof Array ||
|
||||
!relation instanceof Array
|
||||
) {
|
||||
throw new Error("fields或relation格式错误");
|
||||
}
|
||||
fieldRes?.forEach((i, index) => {
|
||||
i._relations = relation.find((j) => j.custom_form_field === i.field);
|
||||
if (i.select_item && typeof i.select_item === 'object') {
|
||||
let keys = Object.keys(i.select_item)
|
||||
i._params = keys.map(key => {
|
||||
return {
|
||||
key,
|
||||
value: i.select_item[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
if (i.edit_input === 'file' || i.edit_input === 'files') {
|
||||
return
|
||||
}
|
||||
if (i._relations) {
|
||||
if (baseTable.get(i._relations.link_table_name)) {
|
||||
baseTable.get(i._relations.link_table_name)().then(res => i._params = res)
|
||||
} else {
|
||||
i._params = i._relations.parameter_id
|
||||
? getparameter({ id: i._relations.parameter_id },false).then((res) => {
|
||||
i._params = res.detail;
|
||||
})
|
||||
: this.index({
|
||||
table_name: i._relations.link_table_name,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
}).then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form = fields;
|
||||
console.log(111, this.form);
|
||||
this.form
|
||||
?.filter((i) => i.list_show)
|
||||
.forEach((i) => {
|
||||
if (i._relations) return
|
||||
let linkOb = {};
|
||||
|
||||
if (i.edit_input === "richtext") {
|
||||
linkOb.customFn = (row) => {
|
||||
return (
|
||||
<div
|
||||
style={{ "max-height": "55px","overflow": "scroll" }}
|
||||
domPropsInnerHTML={row[i.field]}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
}
|
||||
if (
|
||||
i.select_item &&
|
||||
typeof i.select_item === "object" &&
|
||||
!(i.select_item instanceof Array)
|
||||
) {
|
||||
let keys = Object.keys(i.select_item);
|
||||
linkOb.customFn = (row) => {
|
||||
let paramMap = new Map();
|
||||
keys.forEach((key) => {
|
||||
paramMap.set(i.select_item[key], key);
|
||||
});
|
||||
|
||||
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
|
||||
};
|
||||
}
|
||||
if (i._relations) {
|
||||
let { link_relation, foreign_key, link_with_name } = i._relations;
|
||||
if (link_relation === "newHasOne" || link_relation === "hasOne") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "file") {
|
||||
return (
|
||||
<a
|
||||
download={row[link_with_name]?.original_name}
|
||||
href={row[link_with_name]?.url}
|
||||
>
|
||||
{row[link_with_name]?.original_name}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{row[link_with_name]?.name ||
|
||||
row[link_with_name]?.no ||
|
||||
row[link_with_name]?.value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "files") {
|
||||
return (
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<a>
|
||||
{ o?.original_name || o?.name }
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<p>
|
||||
{o?.name ||
|
||||
o?.no ||
|
||||
o?.value ||
|
||||
o?.biaoti ||
|
||||
o?.mingcheng}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
let alignLeft = []
|
||||
this.table.push(
|
||||
Object.assign(
|
||||
{
|
||||
prop: i.field,
|
||||
label: i.name,
|
||||
width: i.width,
|
||||
align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
|
||||
fixed: i.is_fixed,
|
||||
},
|
||||
linkOb
|
||||
)
|
||||
);
|
||||
});
|
||||
this.table.unshift({
|
||||
type: "index",
|
||||
width: 60,
|
||||
label: "序号",
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
columnArrTest() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field).search_input === "checkbox" || this.form.find((i) => i.field === field).search_input === "radio"
|
||||
: false;
|
||||
};
|
||||
},
|
||||
getColumnField() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)
|
||||
: {};
|
||||
};
|
||||
},
|
||||
getColumnParams() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)._params
|
||||
: [];
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getFormDetail();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select {
|
||||
&__item {
|
||||
& > p {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 10px;
|
||||
& > span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue