Files
foton-laws-system-front/src/pages/standardComparisonLibrary/index.vue
T
2021-05-26 19:35:21 +08:00

947 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 标准比对库 -->
<template>
<div class="role-manage v-class">
<table-tools-bar>
<div slot="left">
<div class="search-area">
<el-form :model="searchForm" inline class="label-input-form" @keyup.enter.native="searchBtn">
<el-form-item :label="$t('m.listName')" prop="roleName" class="search-item">
<el-input
v-model="searchForm.listName"
:placeholder="$t('m.listNamePlaceholder')"
clearable
:maxlength="100"/>
</el-form-item>
<el-form-item class="search-item btn-box">
<el-button
icon="el-icon-search"
type="primary"
class="common-button-primary"
@click="searchBtn"
></el-button>
</el-form-item>
<el-form-item class="search-item btn-box">
<el-button
class="common-button-default"
icon="el-icon-refresh-left"
@click="resetSearchForm">{{$t('m.clearQuery')}}</el-button>
</el-form-item>
</el-form>
</div>
</div>
</table-tools-bar>
<div class="action-bar">
<el-button
type="primary"
class="common-button-primary add-button"
@click="openAddModel"
v-btn-permission="'L8CEXYGB4TFUUWY8P89V'"
><i class="iconfont">&#xe84e;</i>新增</el-button>
<!--<el-button-->
<!-- round-->
<!-- class="common-button-default delete-button"-->
<!-- @click="batchDelete"-->
<!-- v-btn-permission="'3RTCZ6AJB9'"-->
<!--&gt;<i class="iconfont">&#xe61b;</i>删除</el-button>-->
</div>
<div class="content">
<loading :loading="tableDataLoading">{{$t('m.dataProcessing')}}</loading>
<el-table
border
ref="selection"
:data="tableList"
tooltip-effect="dark"
style="width: 100%;"
height="100%"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}"
>
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
prop="listName"
:label="$t('m.listName')"
show-overflow-tooltip>
<template slot-scope="scope">
<a class="table-jump" @click="showRole(scope.row)">{{ scope.row.listName }}</a>
</template>
</el-table-column>
<el-table-column
prop="publicFlag"
:label="$t('m.isPublic')">
<template slot-scope="scope">
<div v-if="scope.row.publicFlag === '1'">{{$t('m.yes')}}</div>
<div v-else>{{$t('m.no')}}</div>
</template>
</el-table-column>
<el-table-column
prop="creationTime"
sortable
:label="$t('m.comparisonTime')">
</el-table-column>
<el-table-column
prop="uname"
:label="$t('m.operator')">
</el-table-column>
<!--<el-table-column-->
<!-- prop="modifyTime"-->
<!-- :label="$t('m.operationTime')"-->
<!-- width="150">-->
<!-- <template slot-scope="scope">-->
<!-- <div>{{ scope.row.modifyTime.substring(0, 10) }}</div>-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column label="操作" align="center" width="50" fixed="right">
<template slot-scope="scope">
<div @click.stop style="display: inline-block">
<el-dropdown trigger="click" @command="handleCommand">
<i class="iconfont">&#xe61e;</i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="[scope.row, '查看']" v-btn-permission="'PA8ZUMPD5H63W2CKDY4P'">查看</el-dropdown-item>
<el-dropdown-item :command="[scope.row, '编辑']" v-btn-permission="'W7DKLGCNGNSHSXHS5THA'" v-if="scope.row.isCreater === '1'">编辑</el-dropdown-item>
<el-dropdown-item :command="[scope.row, '维护']" v-btn-permission="'X5FZDNKRNSZGVQ83Q2MM'">维护</el-dropdown-item>
<el-dropdown-item :command="[scope.row, '复制']" v-btn-permission="'PHH87557LJHR4QACEB6U'">复制</el-dropdown-item>
<el-dropdown-item :command="[scope.row, '推送']" v-btn-permission="'X9DMVWKXW3JJCFGCQWL7'">推送</el-dropdown-item>
<el-dropdown-item :command="[scope.row, '删除']" v-btn-permission="'Y46XKNHP6AXV2FYJSRNV'">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</div>
<pagination :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
<!-- 新建抽屉 -->
<el-drawer
:title="drawerFormTitle"
:wrapperClosable="false"
:visible.sync="drawerFormDrawerVisible"
size="800px"
destroy-on-close
>
<div class="demo-drawer-content">
<el-form
ref="listVO"
:model="listVO"
:rules="listVOFormRules"
class="label-input-form"
label-width="150px"
>
<el-form-item :label="$t('m.listName')" prop="name" class="add-form-item">
<el-input v-model.trim="listVO.name" :placeholder="$t('m.listNamePlaceholder')" clearable/>
</el-form-item>
<el-form-item :label="$t('m.byself')" prop="byself" class="add-form-item">
<el-radio-group v-model="listVO.byself" @change="byselfChange">
<el-radio :label="true">{{ $t('m.yes') }}</el-radio>
<el-radio :label="false">{{ $t('m.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('m.isPublic')" prop="public" class="add-form-item">
<el-radio-group v-model="listVO.public" :disabled="listVO.byself">
<el-radio :label="true">{{ $t('m.yes') }}</el-radio>
<el-radio :label="false">{{ $t('m.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="主要比对内容" prop="content" class="add-form-item">
<el-input
type="textarea"
:rows="2"
placeholder="请输入主要比对内容"
v-model="listVO.content"
>
</el-input>
</el-form-item>
<input-for-all-standards
v-model="listVO.standard"
:config="{
attrField: 'standard',
attrName: '涉及标准'
}"
></input-for-all-standards>
<el-form-item label="涉及国家" prop="country" class="add-form-item">
<el-select
type="textarea"
:rows="2"
placeholder="请输入涉及国家"
v-model="listVO.country"
multiple
filterable
allow-create
default-first-option
>
<el-option
v-for="item in dicTypeMap.COUNTRY"
:key="item.label"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-row>
<custom-file
v-model="listVO.files"
:config="{
attrField: 'files',
attrName: '相关附件'
}"
></custom-file>
</el-row>
<!--<el-form-item label="相关附件" prop="files" class="add-form-item">-->
<!-- <el-input-->
<!-- type="textarea"-->
<!-- :rows="2"-->
<!-- v-model="listVO.files"-->
<!-- >-->
<!-- </el-input>-->
<!--</el-form-item>-->
</el-form>
</div>
<div id="listFormButton" class="demo-drawer-footer">
<el-button :loading="isSubmiting" class="common-button-primary" icon="el-icon-check" type="primary" @click="submitDrawerForm('listVO')">{{$t('m.submit')}}</el-button>
<el-button class="common-button-default" icon="el-icon-close" @click="drawerFormDrawerVisible = false">{{$t('m.cancel')}}</el-button>
</div>
</el-drawer>
<!-- 查看抽屉-->
<el-drawer
:show-close="true"
:wrapperClosable="false"
size="800px"
:title="$t('m.seeInformation')"
:visible.sync="viewListInfoDrawerVisible"
>
<div class="see-drawer-content">
<div class="see-drawer-div">
<label class="see-drawer-name">{{$t('m.roleName')}}</label>
<span class="see-drawer-val">{{listVO.name}}</span>
</div>
<div class="see-drawer-div">
<label class="see-drawer-name">{{$t('m.roleDescription')}}</label>
<span class="see-drawer-val">{{listVO.remarks}}</span>
</div>
</div>
</el-drawer>
<!-- 维护抽屉-->
<el-drawer
:show-close="true"
:wrapperClosable="false"
size="800px"
:title="$t('m.maintenanceListDrawerTitle')"
:visible.sync="maintenanceListDrawerVisible"
>
<div class="maintenance-drawer-content demo-drawer-content">
<el-form
:model="maintenanceListDrawerForm"
status-icon
ref="maintenanceListDrawerForm"
label-width="150px"
class="label-input-form"
>
<el-form-item :label="$t('m.characteristic')" prop="natureList" class="add-form-item">
<template v-for="(item, index) in maintenanceListDrawerForm.natureList">
<el-input
:class="{'has-operation': true}"
v-model.trim="item.value"
:placeholder="$t('m.characteristicPlaceholder')"
clearable
/>
<div class="operation-btn-group">
<el-button
v-if="index === maintenanceListDrawerForm.natureList.length - 1"
icon="el-icon-plus" size="small" circle
@click="maintenanceListDrawerForm.natureList.push({ value: '', proertyType: 'NATURE' })"
></el-button>
<el-button
icon="el-icon-minus" size="small" circle
@click="deleteNatureItem(item, index)"
></el-button>
</div>
</template>
</el-form-item>
<el-form-item :label="$t('m.comparisonTerm')" prop="compareItemList" class="add-form-item">
<template v-for="(item, index) in maintenanceListDrawerForm.compareItemList">
<el-input
:class="{'has-operation': true}"
v-model.trim="item.value"
:placeholder="$t('m.comparisonTermPlaceholder')"
clearable
/>
<div class="operation-btn-group">
<el-button
v-if="index === maintenanceListDrawerForm.compareItemList.length - 1"
icon="el-icon-plus" size="small" circle
@click="maintenanceListDrawerForm.compareItemList.push({ value: '', proertyType: 'ITEM' })"
></el-button>
<el-button
icon="el-icon-minus" size="small" circle
@click="deleteCompareItem(item, index)"
></el-button>
</div>
</template>
</el-form-item>
</el-form>
</div>
<div id="maintenanceFormButton" class="demo-drawer-footer">
<el-button class="common-button-primary" icon="el-icon-check" type="primary" @click="submitMaintenanceListDrawerForm('maintenanceListDrawerForm')">{{$t('m.submit')}}</el-button>
<el-button class="common-button-default" icon="el-icon-close" @click="maintenanceListDrawerVisible = false">{{$t('m.cancel')}}</el-button>
</div>
</el-drawer>
<!--复制清单-->
<el-dialog :visible.sync="copyListDialogVisible" title="复制清单">
<el-form ref="copyListForm" :model="copyListForm" :rules="copyListFormRules" class="label-input-form">
<el-formItem label="名称" prop="name" class="add-form-item" label-width="130px">
<el-input v-model="copyListForm.name" placeholder="请输入名称" style="width: 6rem"></el-input>
</el-formItem>
</el-form>
<div slot="footer">
<el-button class="common-button-default" icon="el-icon-close" @click="copyListDialogVisible = false">取 消</el-button>
<el-button class="common-button-primary" icon="el-icon-check" type="primary" @click="submitCopyListForm">保 存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import InputForAllStandards from '@/components/CustomFormComponents/InputForAllStandards'
import CustomFile from '@/components/CustomFormComponents/File'
export default {
name: 'StandardComparisonLibrary',
components: {
InputForAllStandards,
CustomFile
},
data () {
return {
dicTypeMap: {},
tableDataLoading: false,
viewListInfoDrawerVisible: false,
maintenanceListDrawerVisible: false,
copyListDialogVisible: false,
total: 0,
tableHeight: 600,
drawerFormTitle: '',
selectRoleId: '',
searchForm: {
listName: '',
},
pageNo: 1,
pageSize: 10,
userList: [],
drawerFormDrawerVisible: false,
listVO: {
id: '',
name: '',
public: false,
byself: false,
content: '',
standard: '',
country: [],
files: ''
},
listVOForReset: {
id: '',
name: '',
public: false,
byself: false,
content: '',
standard: '',
country: [],
files: ''
},
listVOFormRules: {
name: [
{required: true, message: '清单名称不能为空', trigger: 'blur'},
{type: 'string', max: 20, message: '最多输入20位', trigger: 'blur'}
],
content:[
{ type:'string', max:500, message:'最多输入500个字符', trigger:'change'},
{validator: this.verify.remakeBD, trigger: 'change'}
],
standard:[
{ type:'string', max:3000, message:'最多输入3000个字符', trigger:'change'},
{validator: this.verify.remakeY, trigger: 'change'}
],
country:[
{ type:'array', max:1000, message:'最多输入3000个字符', trigger:'blue,change'},
//{validator: this.verify.remakeY, trigger: 'blue,change'}
],
files:[
{ max:500, message:'最多输入500个字符', trigger:'change'},
{validator: this.verify.remakeY, trigger: 'change'}
],
},
copyListForm: {
listId: '',
name: ''
},
copyListFormForReset: {
// name: [
// {required: true, message: '角色名称不能为空', trigger: 'blur'},
// {type: 'string', max: 20, message: '最多输入20位', trigger: 'blur'}
// ],
},
copyListFormRules: {
listId: '',
name: ''
},
tableList: [],
maintenanceListDrawerForm: {
id: '',
natureList: [
{
value: ''
}
],
compareItemList: [
{
value: ''
}
]
},
maintenanceDeletedIds: [], // 维护Drawer中 被删掉的ID
isSubmiting: false
}
},
methods: {
byselfChange() {
if(this.listVO.byself === true) {
this.listVO.public = false
}
},
// 更多
handleCommand (command) {
switch (command[1]) {
case '查看':
this.showRole(command[0])
break
case '编辑':
this.editTableRow(command[0])
break
case '推送':
this.pushTableRow(command[0])
break
case '复制':
this.copyTableRow(command[0])
break
case '删除':
this.deleteTableRow(command[0])
break
case '维护':
this.maintenanceTableRow(command[0])
break
}
},
// 查询、加载表格
queryTablePage () {
const formData = {
page: this.pageNo,
pageSize: this.$store.getters.userInfo.configContent,
listName: this.searchForm.listName,
}
return new Promise((resolve, reject) => {
this.$http.get('lawss/sarStandCompareBase/page',
formData,
{
_this: this,
loading: 'tableDataLoading'
},
res => {
this.tableList = res.data.list
this.total = res.data.count
resolve(res)
}, e => {
reject(e)
})
})
},
// 根据条件查询信息
searchBtn () {
this.resetPageNo()
this.queryTablePage()
},
/**
* 重置搜索表单并重新加载表格数据
*/
resetSearchForm () {
this.searchForm.listName = ''
// this.resetSearchForm()
this.queryTablePage()
},
// 对话框
instance (type, content) {
const title = '请选择'
switch (type) {
case 'info':
this.$message.info({
title: title,
message: content
})
break
case 'success':
this.$message.success({
title: title,
message: content
})
break
case 'warning':
this.$message.warning({
title: title,
message: content
})
break
case 'error':
this.$message.error({
title: title,
message: content
})
break
}
},
// 新增
openAddModel () {
this.listVO = { ...this.listVOForReset, country: [] }
this.drawerFormTitle = this.$t('m.comparisonListDrawerTitleNew')
this.drawerFormDrawerVisible = true
},
// 表格行 - 编辑
editTableRow (row) {
const countryList = row.countryInvolved ? row.countryInvolved.split(',') : []
this.listVO = {
id: row.id,
name: row.listName,
public: row.publicFlag === '1',
content: row.content,
byself: row.byself === '1',
standard: row.standInvolved,
country: countryList,
files: row.relatedDoc
}
this.drawerFormTitle = this.$t('m.comparisonListDrawerTitleEdit')
this.drawerFormDrawerVisible = true
},
// 表格行 - 推送
pushTableRow (row) {
const id = row.id
const formData = {
title: "【标准比对库】"+row.listName,
link: `viewStandardComparisonLibrary/${row.id}`,
content: `viewStandardComparisonLibrary/${row.id}`,
state: '暂存'
}
this.$http.postData('lawss/sarNotice/saveNotice1', formData, {
_this: this
}, res => {
if (res.ok) {
// this.$message.success('推送成功')
} else {
throw new Error('推送失败')
}
}, e => {
// this.$message.success('推送失败')
})
},
copyTableRow(row) {
const id = row.id
this.copyListForm = {
...this.copyListFormForReset,
listId: id
}
this.copyListDialogVisible = true
},
submitCopyListForm() {
const formData = {
listName: this.copyListForm.name,
id: this.copyListForm.listId
}
this.$http.postData('lawss/sarStandCompareBase/copyList', formData, {
_this: this
}, res => {
if (res.ok) {
this.$message.success('复制成功')
this.copyListDialogVisible = false
this.queryTablePage()
} else {
throw new Error('复制失败')
}
}, e => {
// this.$message.success('推送失败')
})
},
// 批量删除
batchDelete () {
console.log(this.$refs['selection'].selection)
const selection = this.$refs['selection'].selection
if (selection && selection.length === 0) {
this.instance('warning', '请选择一条数据进行删除')
} else {
let delIds = selection.map(item => item.id).join(',')
this.$confirm('确定删除这些数据?', '请选择', {
confirmButtonText: '确定',
confirmButtonClass: 'common-button-primary',
cancelButtonText: '取消',
roundButton: false,
type: 'warning'
}).then(() => {
this.$http.delete('sys/role/deleteList', {
ids: delIds
},
{
_this: this
}, res => {
if (res.ok) {
this.queryTablePage()
}
})
}).catch(() => {
this.$refs.selection.clearSelection()
})
}
},
// 表格行 - 删除
deleteTableRow (row) {
// 此处需要confirm功能
this.$confirm('确定删除这一条数据?', '请选择', {
confirmButtonText: '确定',
confirmButtonClass: 'common-button-primary',
cancelButtonText: '取消',
roundButton: false,
type: 'warning'
}).then(() => {
this.$http.post('lawss/sarStandCompareBase/deletesSarStandCompareBase', {
ids: row.id
},
{
_this: this
}, res => {
if (res.ok) {
this.queryTablePage()
}
})
}).catch(() => {
})
},
// 保存清单信息
submitDrawerForm (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.isSubmiting = true
const formData = {
id: this.listVO.id,
listName: this.listVO.name,
publicFlag: this.listVO.public ? '1' : '0', // 0: 不公开 1: 公开
byself: this.listVO.byself ? '1' : '0', // 1: 仅自己可见
content: this.listVO.content,
standInvolved: this.listVO.standard,
countryInvolved: this.listVO.country.join(','),
relatedDoc: this.listVO.files
}
if (formData.id) {
// 修改角色信息
// 此处暂未实现
this.$http.postData('lawss/sarStandCompareBase/updateSarStandCompareBase', formData,
{
_this: this, loading: 'isSubmiting'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.drawerFormDrawerVisible = false
this.queryTablePage()
} else {
}
}
)
} else {
this.$http.postData('lawss/sarStandCompareBase/saveSarStandCompareBase', formData,
{
_this: this,
loading: 'isSubmiting'
}, res => {
if (res.ok) {
this.drawerFormDrawerVisible = false
this.queryTablePage()
// this.$nextTick(() => {
// this.$refs['roleVO'].resetFields()
// })
} else {
}
})
}
} else {
}
})
},
// 查看角色信息
showRole (row) {
this.$store.commit('setDetailMap', this.$route.path)
this.$router.push({
name: 'ViewStandardComparisonLibrary',
params: {
listId: row.id
}
})
},
pageChange (page) {
this.pageNo = page
this.queryTablePage()
},
pageSizeChange () {
this.queryTablePage()
},
resetPageNo() {
this.pageNo = 1
},
/**
* 维护窗口, 获取维护数据, 并打开 drawer
* @param row 表格行数据
*/
maintenanceTableRow(row) {
// 重置删除IDS
this.maintenanceDeletedIds = []
this.queryMaintenanceList(row.id).then(data => {
const {ITEM, NATURE} = data
const natureList = NATURE.map(item => {
return {
...item,
id: item.id,
value: item.proertyVal,
proertyType: item.proertyType
}
})
if(natureList.length === 0) {
natureList.push(
{
value: '',
proertyType: 'NATURE'
}
)
}
const compareItemList = ITEM.map(item => {
return {
...item,
id: item.id,
value: item.proertyVal,
proertyType: item.proertyType
}
})
if(compareItemList.length === 0) {
compareItemList.push(
{
value: '',
proertyType: 'ITEM'
}
)
}
this.maintenanceListDrawerForm = {
id: row.id,
natureList: natureList,
compareItemList: compareItemList
}
// 打开弹框
this.maintenanceListDrawerVisible = true
}).catch(err => {
})
},
/**
* 获取维护数据
* @param id
* @returns {Promise<unknown>}
*/
queryMaintenanceList(id) {
const formData = {
id
}
return new Promise((resolve, reject) => {
this.$http.get('lawss/sarStandCompareBase/findCompareBaseNature', formData,
{
_this: this,
loading: 'tableDataLoading'
}, res => {
if (res.ok) {
resolve(res.data)
// this.drawerFormDrawerVisible = false
// this.queryTablePage()
// this.$nextTick(() => {
// this.$refs['roleVO'].resetFields()
// })
} else {
reject(res)
}
}, err => {
reject(err)
})
})
},
/**
* 提交维护窗口的信息
* @param name
*/
submitMaintenanceListDrawerForm (name) {
this.$refs[name].validate((valid) => {
if (valid) {
const natureList = this.maintenanceListDrawerForm.natureList.map(item => {
return {
// ...item,
id: item.id,
proertyVal: item.value,
proertyType: item.proertyType
}
})
const compareItemList = this.maintenanceListDrawerForm.compareItemList.map(item => {
return {
// ...item,
id: item.id,
proertyVal: item.value,
proertyType: item.proertyType
}
})
const formData = {
id: this.maintenanceListDrawerForm.id,
natureList: natureList,
compareItemList: compareItemList,
ids: this.maintenanceDeletedIds.toString()
}
this.$http.postData('lawss/sarStandCompareBase/saveCompareBaseVal', formData,
{
_this: this, loading: 'tableDataLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.maintenanceListDrawerVisible = false
// this.queryTablePage()
} else {
}
}
)
} else {
}
})
},
/**
* 删除 对比项
*/
deleteCompareItem(item, index) {
this.maintenanceDeletedIds.push(item.id)
this.maintenanceListDrawerForm.compareItemList.splice(index, 1)
},
/**
* 删除 特点
*/
deleteNatureItem(item, index) {
this.maintenanceDeletedIds.push(item.id)
this.maintenanceListDrawerForm.natureList.splice(index, 1)
},
// 获取所有的下拉框数据
queryDicTypeMap () {
return new Promise((resolve, reject) => {
this.$http.get('sys/dictype/getDicTypeListCode',
{},
{
_this: this,
},
res => {
this.dicTypeMap = res.data
resolve(res)
}, e => {
reject(e)
})
})
},
},
created () {
this.tableDataLoading = true
Promise.all([this.queryTablePage(), this.queryDicTypeMap()])
.then(values => {
this.tableDataLoading = false
})
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/mixins';
.role-manage {
height: 100%;
flex-direction: column;
.content {
padding: 0 10px;
height: calc(~'100% - 55px - 50px - 56px');
}
}
.operation-btn-group {
display: inline-block;
}
.has-operation {
width: calc(~'100% - 90px');
}
.el-radio-group {
height: 49px;
line-height: 49px;
font-size: unset;
padding-left: 10px;
}
::v-deep .el-drawer__header{
&>span:first-child{
outline: none!important;
}
}
</style>