页面优化

This commit is contained in:
aoli.qu 2021-12-23 14:58:53 +08:00
parent a6c33e5f86
commit bbd792522e
5 changed files with 117 additions and 94 deletions

View File

@ -22,13 +22,13 @@
</div> </div>
</a-card> </a-card>
<a-card v-if="hasPerm('notice:edit')" > <a-card v-if="hasPerm('notice:edit')" style="margin-top: 30px;">
<a-tabs default-active-key="1" @change="tabsCallback"> <a-tabs default-active-key="1" @change="tabsCallback">
<a-tab-pane key="1" tab="已读人员"> <a-tab-pane key="1" tab="已读人员">
<s-table <s-table
ref="table" ref="table1"
:columns="columns" :columns="columns1"
:data="loadData" :data="loadData1"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
:pagination="{ pageSize: 5 }" :pagination="{ pageSize: 5 }"
:showSizeChanger="false" :showSizeChanger="false"
@ -36,13 +36,14 @@
<template slot="readTime" slot-scope="text, record"> <template slot="readTime" slot-scope="text, record">
{{ record.readTime | moment('YYYY-MM-DD HH:mm:ss') }} {{ record.readTime | moment('YYYY-MM-DD HH:mm:ss') }}
</template> </template>
</s-table> </s-table>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="1" tab="未读人员" > <a-tab-pane key="2" tab="未读人员" >
<s-table <s-table
ref="table" ref="table2"
:columns="columns" :columns="columns2"
:data="loadData" :data="loadData2"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
:pagination="{ pageSize: 5 }" :pagination="{ pageSize: 5 }"
:showSizeChanger="false" :showSizeChanger="false"
@ -59,40 +60,59 @@
</template> </template>
<script> <script>
import { noticeGet, noticePagePerson } from '@/api/notice/notice' import { STable } from '@/components'
import { noticeGet, noticePagePerson, noticeRead } from '@/api/notice/notice'
export default { export default {
components: {
STable
},
data () { data () {
return { return {
model: {}, model: {},
queryParam: { noticeId: this.$route.query.id, isRead: 1 }, queryParam: { noticeId: this.$route.query.id, isRead: 1 },
readCount: 0,
unreadCount: 0,
// //
columns: [ columns1: [
{ {
title: '公告标题', title: '人员名称',
dataIndex: 'title' dataIndex: 'personName'
}, },
{ {
title: '发布单位/人', title: '组织名称',
dataIndex: 'createOrgName' dataIndex: 'orgName'
}, },
{ {
title: '发布时间', title: '阅览时间',
width: 200, width: 200,
dataIndex: 'readTime', dataIndex: 'readTime',
key: 'readTime', key: 'readTime',
scopedSlots: { customRender: 'readTime' } scopedSlots: { customRender: 'readTime' }
}
],
columns2: [
{
title: '人员名称',
dataIndex: 'personName'
}, },
{ {
title: '菜单类型', title: '组织名称',
dataIndex: 'type', dataIndex: 'orgName'
scopedSlots: { customRender: 'type' }
} }
], ],
// Promise // Promise
loadData: parameter => { loadData1: parameter => {
return noticePagePerson(Object.assign(parameter, this.queryParam)).then((res) => { return noticePagePerson(Object.assign(parameter, { noticeId: this.$route.query.id, isRead: 1 })).then((res) => {
console.log(res) console.log(res)
this.readCount = res.total
return res
})
},
loadData2: parameter => {
return noticePagePerson(Object.assign(parameter, { noticeId: this.$route.query.id, isRead: 0 })).then((res) => {
console.log(res)
this.unreadCount = res.total
return res return res
}) })
} }
@ -100,8 +120,13 @@ export default {
}, },
created () { created () {
const noticeId = this.$route.query.id const noticeId = this.$route.query.id
console.log(noticeId)
this.getDetail(noticeId) this.getDetail(noticeId)
const type = this.$route.query.type
console.log(type)
//
if (type == 2) {
this.readNotice(noticeId)
}
}, },
methods: { methods: {
// //
@ -113,14 +138,22 @@ export default {
this.model = res.data this.model = res.data
}) })
}, },
readNotice (id) {
console.log('-------------read')
console.log(id)
noticeRead({ id: id }).then(res => {
//
console.log(res)
})
},
tabsCallback (key) { tabsCallback (key) {
if (key === '1') { if (key === '1') {
this.queryParam.isRead = 1 this.queryParam.isRead = 1
this.$refs.table.refresh(true) this.$refs.table1.refresh(true)
} }
if (key === '2') { if (key === '2') {
this.queryParam.isRead = 0 this.queryParam.isRead = 0
this.$refs.table.refresh(true) this.$refs.table2.refresh(true)
} }
} }
} }

View File

@ -16,7 +16,7 @@
</a-form> </a-form>
</div> </div>
<s-table <s-table
ref="table" ref="table2"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
@ -28,7 +28,7 @@
{{ record.publishTime | moment('YYYY-MM-DD HH:mm:ss') }} {{ record.publishTime | moment('YYYY-MM-DD HH:mm:ss') }}
</template> </template>
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a v-if="hasPerm('notice:list')" @click="showGetPage(record.id)">查看</a> <a v-if="hasPerm('notice:list')" @click="showGetPage(record.id, 2)">查看</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
</span> </span>
</s-table> </s-table>
@ -53,7 +53,7 @@
</div> </div>
<s-table <s-table
ref="table" ref="table1"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
@ -69,7 +69,7 @@
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a v-if="hasPerm('notice:edit')" @click="showAddPage(record.id)">编辑</a> <a v-if="hasPerm('notice:edit')" @click="showAddPage(record.id)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('notice:edit')" /> <a-divider type="vertical" v-if="hasPerm('notice:edit')" />
<a v-if="hasPerm('notice:list')" @click="showGetPage(record.id)">查看</a> <a v-if="hasPerm('notice:list')" @click="showGetPage(record.id, 1)">查看</a>
<a-divider type="vertical" v-if="hasPerm('notice:list')"/> <a-divider type="vertical" v-if="hasPerm('notice:list')"/>
<a-popconfirm v-if="hasPerm('notice:del')" placement="topRight" title="确认删除?" @confirm="() => handleDel(record)"> <a-popconfirm v-if="hasPerm('notice:del')" placement="topRight" title="确认删除?" @confirm="() => handleDel(record)">
<a>删除</a> <a>删除</a>
@ -148,11 +148,11 @@
tabsCallback (key) { tabsCallback (key) {
if (key === '1') { if (key === '1') {
this.queryParam.noticeRange = 1 this.queryParam.noticeRange = 1
this.$refs.table.refresh(true) this.$refs.table1.refresh(true)
} }
if (key === '2') { if (key === '2') {
this.queryParam.noticeRange = 2 this.queryParam.noticeRange = 2
this.$refs.table.refresh(true) this.$refs.table2.refresh(true)
} }
}, },
/** /**
@ -177,11 +177,12 @@
} }
}) })
}, },
showGetPage (id) { showGetPage (id, type) {
this.$router.push({ this.$router.push({
path: '/notice/detail', path: '/notice/detail',
query: { query: {
id: id id: id,
type: type
} }
}) })
} }

View File

@ -7,7 +7,7 @@
</div> </div>
<s-table <s-table
ref="table" ref="table1"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
@ -31,7 +31,7 @@
</div> </div>
<s-table <s-table
ref="table" ref="table2"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
@ -115,11 +115,11 @@
tabsCallback (key) { tabsCallback (key) {
if (key === '1') { if (key === '1') {
this.queryParam.orgType = 1 this.queryParam.orgType = 1
this.$refs.table.refresh(true) this.$refs.table1.refresh(true)
} }
if (key === '2') { if (key === '2') {
this.queryParam.orgType = 2 this.queryParam.orgType = 2
this.$refs.table.refresh(true) this.$refs.table2.refresh(true)
} }
}, },
/** /**

View File

@ -186,8 +186,7 @@
label="身份证正面" label="身份证正面"
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol"> :wrapperCol="wrapperCol">
<image-upload ref="upload" sourceId="idPhoto" :defaultList="fileList"></image-upload> <db-upload v-model="fileList" max="1"></db-upload>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-col> </a-col>
@ -197,7 +196,7 @@
label="身份证反面" label="身份证反面"
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol"> :wrapperCol="wrapperCol">
<image-upload ref="upload1" sourceId="idPhoto" :defaultList="fileList2"></image-upload> <db-upload v-model="fileList2" max="1"></db-upload>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-col> </a-col>
@ -214,11 +213,11 @@
import { personAddOrUpdate, personGet } from '@/api/person/person' import { personAddOrUpdate, personGet } from '@/api/person/person'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem' import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import OrgTree from '../org/OrgTree' import OrgTree from '../org/OrgTree'
import ImageUpload from '@/components/ImageUpload' import DbUpload from '@/components/DbUpload/DbUpload.vue'
export default { export default {
components: { components: {
OrgTree, OrgTree,
ImageUpload DbUpload
}, },
data () { data () {
return { return {
@ -290,17 +289,11 @@
this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr }) this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })
if (data.idPhotoFace) { if (data.idPhotoFace) {
this.fileList.push(data.idPhotoFace) this.fileList = JSON.parse(data.idPhotoFace)
} }
if (data.idPhotoBack) { if (data.idPhotoBack) {
this.fileList2.push(data.idPhotoBack) this.fileList2 = JSON.parse(data.idPhotoBack)
} }
this.$nextTick(() => {
this.$refs.upload.flush()
})
this.$nextTick(() => {
this.$refs.upload1.flush()
})
this.form.setFieldsValue( this.form.setFieldsValue(
{ {
id: data.id, id: data.id,
@ -355,32 +348,18 @@
validateFields((errors, values) => { validateFields((errors, values) => {
if (!errors) { if (!errors) {
values.type = values.type.join(',') values.type = values.type.join(',')
values.idPhotoFace = JSON.stringify(this.fileList)
values.idPhotoBack = JSON.stringify(this.fileList2)
personAddOrUpdate(values).then((res) => {
this.confirmLoading = false
if (res.code === 200) {
this.$message.success('操作成功')
this.$emit('ok', values)
// this.handleCancel()
this.$refs.upload.submitUpload().then((url) => { } else {
if (url.length > 0) { this.$message.error('操作失败:' + res.msg)
values.idPhotoFace = url
} }
this.$refs.upload1.submitUpload().then((url1) => {
if (url1.length > 0) values.idPhotoBack = url1
//
personAddOrUpdate(values).then((res) => {
this.confirmLoading = false
if (res.code === 200) {
this.$message.success('操作成功')
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('操作失败:' + res.msg)
}
}).finally((res) => {
this.confirmLoading = false
})
}, (err) => {
this.$message.error(err)
})
}, (err) => { }, (err) => {
this.$message.error(err) this.$message.error(err)
}) })

View File

@ -3,7 +3,15 @@
<a-col :md="5" :sm="24"> <a-col :md="5" :sm="24">
<a-card :bordered="false" :loading="treeLoading"> <a-card :bordered="false" :loading="treeLoading">
<div v-if="this.orgTree != ''"> <div v-if="this.orgTree != ''">
<a-tree :treeData="orgTree" :onLoadData="orgTree" v-if="orgTree.length" @select="handleClick" :defaultExpandAll="true" :defaultExpandedKeys="defaultExpandedKeys" :defaultSelectedKeys="defaultSelectedKeys" :replaceFields="replaceFields" /> <a-tree
:treeData="orgTree"
:onLoadData="orgTree"
v-if="orgTree.length"
@select="handleClick"
:defaultExpandAll="true"
:defaultExpandedKeys="defaultExpandedKeys"
:defaultSelectedKeys="defaultSelectedKeys"
:replaceFields="replaceFields" />
</div> </div>
<div v-else> <div v-else>
<a-empty :image="simpleImage" /> <a-empty :image="simpleImage" />
@ -121,7 +129,7 @@ export default {
PersonDetail, PersonDetail,
OrgTree OrgTree
}, },
data() { data () {
return { return {
// //
queryParam: { isAdmin: 2 }, queryParam: { isAdmin: 2 },
@ -176,7 +184,7 @@ export default {
orgType: 1 orgType: 1
} }
}, },
created() { created () {
this.getOrgTree() this.getOrgTree()
if (this.hasPerm('person:edit') || this.hasPerm('person:resetPwd') || this.hasPerm('person:del')) { if (this.hasPerm('person:edit') || this.hasPerm('person:resetPwd') || this.hasPerm('person:del')) {
@ -192,7 +200,7 @@ export default {
/** /**
* 获取到机构树展开顶级下树节点考虑到后期数据量变大不建议全部展开 * 获取到机构树展开顶级下树节点考虑到后期数据量变大不建议全部展开
*/ */
async getOrgTree() { async getOrgTree () {
await orgList({ orgType: this.orgType }).then(res => { await orgList({ orgType: this.orgType }).then(res => {
this.treeLoading = false this.treeLoading = false
if (!res.code === 200 || !res.data.length) { if (!res.code === 200 || !res.data.length) {
@ -211,7 +219,7 @@ export default {
console.log(this.defaultExpandedKeys) console.log(this.defaultExpandedKeys)
}) })
}, },
async changeOrgType() { async changeOrgType () {
this.orgType = this.orgType === 1 ? 2 : 1 this.orgType = this.orgType === 1 ? 2 : 1
await this.getOrgTree() await this.getOrgTree()
// 使asyncawait orgTree // 使asyncawait orgTree
@ -220,7 +228,7 @@ export default {
/** /**
* 重置密码 * 重置密码
*/ */
resetPwd(record) { resetPwd (record) {
personResetPwd({ id: record.id }).then(res => { personResetPwd({ id: record.id }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('重置成功') this.$message.success('重置成功')
@ -233,7 +241,7 @@ export default {
/** /**
* 删除用户 * 删除用户
*/ */
personDelete(record) { personDelete (record) {
personDel({ id: record.id, deleteReason: '' }).then((res) => { personDel({ id: record.id, deleteReason: '' }).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('删除成功') this.$message.success('删除成功')
@ -248,14 +256,15 @@ export default {
/** /**
* 添加证书 * 添加证书
*/ */
addPersonCertificate(record) { addPersonCertificate (record) {
this.$router.push({ this.$router.push({
path: '/archives/certificate/EditCertificate', query: { path: '/archives/certificate/EditCertificate',
query: {
personId: record.id personId: record.id
} }
}); })
}, },
quit() { quit () {
if (!this.selectedRowKeys.length) { if (!this.selectedRowKeys.length) {
this.$message.warning('请选择人员') this.$message.warning('请选择人员')
return return
@ -277,18 +286,18 @@ export default {
this.$message.error('操作错误:' + err.msg) this.$message.error('操作错误:' + err.msg)
}) })
}, },
onCancel() { onCancel () {
} }
}) })
}, },
transfer() { transfer () {
if (!this.selectedRowKeys.length) { if (!this.selectedRowKeys.length) {
this.$message.warning('请选择人员') this.$message.warning('请选择人员')
return return
} }
this.$refs.orgModal.loadOrg() this.$refs.orgModal.loadOrg()
}, },
selectOrg(orgData) { selectOrg (orgData) {
this.$confirm({ this.$confirm({
title: '提示', title: '提示',
content: '确认转移部门至' + orgData.name + '吗', content: '确认转移部门至' + orgData.name + '吗',
@ -306,11 +315,11 @@ export default {
this.$message.error('操作错误:' + err.msg) this.$message.error('操作错误:' + err.msg)
}) })
}, },
onCancel() { onCancel () {
} }
}) })
}, },
setAdmin() { setAdmin () {
if (!this.selectedRowKeys.length) { if (!this.selectedRowKeys.length) {
this.$message.warning('请选择人员') this.$message.warning('请选择人员')
return return
@ -332,11 +341,11 @@ export default {
this.$message.error('操作错误:' + err.msg) this.$message.error('操作错误:' + err.msg)
}) })
}, },
onCancel() { onCancel () {
} }
}) })
}, },
personRegister() { personRegister () {
if (this.orgType === 1) { if (this.orgType === 1) {
this.$router.push({ this.$router.push({
path: '/person/personRegister', path: '/person/personRegister',
@ -352,19 +361,20 @@ export default {
/** /**
* 点击左侧机构树查询列表 * 点击左侧机构树查询列表
*/ */
handleClick(e) { handleClick (e) {
this.queryParam.orgId = e.toString() this.queryParam.orgId = e.toString()
this.orgId = e.toString() this.orgId = e.toString()
this.queryParam.orgType = this.orgType
this.$refs.table.refresh(true) this.$refs.table.refresh(true)
}, },
handleOk() { handleOk () {
this.$refs.table.refresh() this.$refs.table.refresh()
}, },
onRadioChange(e) { onRadioChange (e) {
this.queryParam.isAdmin = e.target.value this.queryParam.isAdmin = e.target.value
this.$refs.table.refresh(true) this.$refs.table.refresh(true)
}, },
onSelectChange(selectedRowKeys, selectedRows) { onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows this.selectedRows = selectedRows
} }