Files
foton-laws-system-front/src/pages/standardComparisonLibrary/view.vue
T
2021-05-26 14:15:41 +08:00

1497 lines
44 KiB
Vue

<!-- 标准比对库查看 -->
<template>
<div class="view-standard-comparison-library v-class">
<view-header toggle>
<template slot="title">{{ listVO.name }}--{{ listVO.uname }}</template>
<template slot="time">{{ listVO.createTime }}</template>
<template slot="right">
<el-tag type="success" v-if="listVO.public === '公开'">公开</el-tag>
<el-tag type="info" v-else>不公开</el-tag>
</template>
</view-header>
<view-base-info toggle>
<div>
<div class="see-info-content">
<div class="see-info-div">
<label class="see-info-name">主要比对内容</label>
<span class="see-info-val">{{listVO.content}}</span>
</div>
<div class="see-info-div">
<label class="see-info-name">涉及标准</label>
<span class="see-info-val">{{listVO.standardList}}</span>
</div>
<div class="see-info-div">
<label class="see-info-name">涉及国家</label>
<span class="see-info-val">{{listVO.countryList}}</span>
</div>
<div class="see-info-div">
<label class="see-info-name">{{$t('m.relatedAttachments')}}</label>
<div class="see-info-Multiple-val">
<p
class="files-title"
v-for="(file, fileIndex) in listVO.fileList"
:key="fileIndex"
>
<a @click="downloadFile(file.id, file.oldFileName)" target="_blank">{{ file.oldFileName }}</a>
<i title="下载" @click="downloadFile(file.id)" class="icon-download" />
<!--<i title="下载带水印" @click="downloadFileByWater(file.id, file.fileSuffix)" class="icon-download2" />-->
</p>
</div>
</div>
</div>
</div>
</view-base-info>
<!--<table-tools-bar>-->
<!-- <div slot="left">-->
<!-- <div class="search-area">-->
<!-- &lt;!&ndash;<el-form :model="searchForm" inline class="label-input-form">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form-item :label="$t('m.listName')" prop="roleName" class="search-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-input&ndash;&gt;-->
<!-- &lt;!&ndash; v-model="searchForm.listName"&ndash;&gt;-->
<!-- &lt;!&ndash; :placeholder="$t('m.listNamePlaceholder')"&ndash;&gt;-->
<!-- &lt;!&ndash; clearable&ndash;&gt;-->
<!-- &lt;!&ndash; :maxlength="100"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form-item class="search-item btn-box">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-search"&ndash;&gt;-->
<!-- &lt;!&ndash; type="primary"&ndash;&gt;-->
<!-- &lt;!&ndash; class="common-button-primary"&ndash;&gt;-->
<!-- &lt;!&ndash; round&ndash;&gt;-->
<!-- &lt;!&ndash; @click="searchBtn"&ndash;&gt;-->
<!-- &lt;!&ndash; ></el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form-item class="search-item btn-box">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; class="common-button-default"&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-refresh-left"&ndash;&gt;-->
<!-- &lt;!&ndash; round&ndash;&gt;-->
<!-- &lt;!&ndash; @click="resetSearchForm">{{$t('m.clearQuery')}}</el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- &lt;!&ndash;</el-form>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!--</table-tools-bar>-->
<div class="action-bar">
<el-button
round
class="common-button-default"
@click="selectStandardDrawerVisible = true"
v-btn-permission="'6EF2WB2JVVPB77TWN96A'"
>标准检索</el-button>
<el-button
round
class="common-button-default"
@click="viewStandardListDrawerVisible = true"
v-btn-permission="'49EAXH28FWGXTHJ32AGR'"
>标准列表</el-button>
<el-button
round
class="common-button-default"
@click="maintenanceTableRow"
v-btn-permission="'BGSM95SWVTFFHK9KGUDM'"
>对比维护</el-button>
<el-button
v-show="!isEdit"
round
class="common-button-default"
@click="isEdit = true"
v-btn-permission="'FRLANSDS523SEDFQP4BS'"
>编辑</el-button>
<el-button
v-show="isEdit"
round
class="common-button-default"
@click="isEdit = false"
v-btn-permission="'CHW74K4V32G4H4MXQQNG'"
>保存</el-button>
<el-button
round
class="common-button-default"
@click="exportExcel"
v-btn-permission="'XKDYNUQUAVP8PUV7U5N8'"
>导出</el-button>
<el-button
round
class="common-button-default"
@click="openUploadFileDialog"
v-btn-permission="'W4EUHCLRBFQXRZ7V8JDU'"
>上传附件</el-button>
<el-button
round
class="common-button-default"
@click="importFileDialogVisible = true"
v-btn-permission="'TR8QH2YNK3CAYTVZP5ZZ'"
>导入</el-button>
<el-button
round
class="common-button-default"
@click="downloadTemplate"
v-btn-permission="'D55BM8LYVZL2SV56VGT4'"
>模板下载</el-button>
<!--<el-button-->
<!-- type="primary"-->
<!-- class="common-button-primary add-button"-->
<!-- round-->
<!-- @click="openAddModel"-->
<!-- v-btn-permission="'4C796W933W'"-->
<!--&gt;<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>
<!--主表格 拆分-->
<template>
<div class="content">
<loading :loading="tableDataLoading">{{$t('m.dataProcessing')}}</loading>
<el-table
ref="selection"
class="el-table--border"
:data="tableList"
tooltip-effect="dark"
style="width: 100%;"
height="100%"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}"
@cell-click="handleContentCellClick"
>
<el-table-column
width="100"
>
<template slot-scope="scope">
<div>
{{ scope.row.contrastItem && scope.row.contrastItem.proertyVal }}
<i
v-show="isEdit"
class="el-icon-close"
style="color: #f56c6c;
float: right;
line-height: 23px;"
@click="handleContrastItemRemove(scope.row)"
></i>
</div>
</template>
</el-table-column>
<el-table-column
v-if="tableColumns.length === 0"
>
</el-table-column>
<template v-else>
<!--多级表头-->
<!--国家表头-->
<el-table-column
v-for="country in tableColumns"
:key="country.label"
:label="country.label"
>
<!--标准表头-->
<el-table-column
v-for="standard in country.children"
:key="standard.id"
:label="standard.label"
>
<!--特点表头-->
<el-table-column
v-for="nature in standard.children"
:key="nature.id"
:label="nature.label"
:prop="nature.prop"
min-width="150px"
>
<template v-slot:header="scope">
<div>
{{ scope.column.label }}
<i
v-show="isEdit"
class="el-icon-close"
style="color: #f56c6c;
float: right;
line-height: 23px;"
@click="handleNatureRemove(nature.id)"
></i>
</div>
</template>
<template slot-scope="scope">
{{
scope.row[nature.prop]['formContent']
? scope.row[nature.prop]['formContent'].substr(0, 10)
: '--'
}}
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<!--多级表头结束-->
</template>
</el-table>
</div>
<!--<pagination :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>-->
</template>
<!-- 维护抽屉-->
<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" :loading="btnLoading" @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-drawer
:show-close="true"
:wrapperClosable="false"
size="800px"
title="标准列表"
:visible.sync="viewStandardListDrawerVisible"
>
<div class="see-drawer-content demo-drawer-content" style="height: 100%;">
<standard-view :list-id="listId" @close="selectStandardDrawerVisible = false"></standard-view>
</div>
</el-drawer>
<!-- 标准检索抽屉-->
<el-drawer
:show-close="true"
:wrapperClosable="false"
size="800px"
title="标准检索"
:visible.sync="selectStandardDrawerVisible"
custom-class="s-r-drawer">
<div class="demo-drawer-content">
<standard-select
ref="standardSelect"
:list-id="listId"
@reject="btnLoading = false"
@close="selectStandardDrawerVisible = false" />
</div>
<div class="demo-drawer-footer">
<el-button class="common-button-primary" icon="el-icon-check" type="primary" :loading="btnLoading" @click="handleSelectStandardDrawerSubmit">{{$t('m.submit')}}</el-button>
<el-button class="common-button-default" icon="el-icon-close" @click="handleSelectStandardDrawerCancel">{{$t('m.cancel')}}</el-button>
</div>
</el-drawer>
<!-- 编辑单元格抽屉 -->
<el-drawer
title="编辑"
:wrapperClosable="false"
:visible.sync="drawerEditCellFormDrawerVisible"
size="800px"
destroy-on-close
>
<div class="demo-drawer-content">
<el-form
ref="editCellForm"
:model="editCellForm"
:rules="editCellFormRules"
class="label-input-form"
label-width="150px"
>
<el-form-item label="文本" prop="name" class="add-form-item">
<el-input v-model.trim="editCellForm.content" placeholder="请输入文本内容" clearable/>
</el-form-item>
<!--相关附件-->
<el-row>
<custom-file
v-model="editCellForm.files"
:config="{
attrField: 'files',
attrName: $t('m.relatedAttachments')
}"
></custom-file>
</el-row>
</el-form>
</div>
<div class="demo-drawer-footer">
<el-button class="common-button-primary" icon="el-icon-check" type="primary" @click="submitEditCellFormDrawer('editCellForm')">{{$t('m.submit')}}</el-button>
<el-button class="common-button-default" icon="el-icon-close" @click="drawerEditCellFormDrawerVisible = false">{{$t('m.cancel')}}</el-button>
</div>
</el-drawer>
<!-- 查看单元格抽屉-->
<el-drawer
:show-close="true"
:wrapperClosable="false"
size="800px"
:title="$t('m.seeInformation')"
:visible.sync="viewCellInfoDrawerVisible"
>
<div class="see-drawer-content">
<div class="see-drawer-div">
<label class="see-drawer-name">文本</label>
<span class="see-drawer-val">{{editCellForm.content}}</span>
</div>
<div class="see-drawer-div">
<label class="see-drawer-name">{{$t('m.relatedAttachments')}}</label>
<div class="see-drawer-Multiple-val">
<p
class="files-title"
v-for="(file, fileIndex) in editCellForm.formFileList"
:key="fileIndex"
>
<a @click="downloadFile(file.id, file.oldFileName)" target="_blank">{{ file.oldFileName }}</a>
<i title="下载" @click="downloadFile(file.id)" class="icon-download" />
<!--<i title="下载带水印" @click="downloadFileByWater(file.id, file.fileSuffix)" class="icon-download2" />-->
</p>
</div>
</div>
</div>
</el-drawer>
<!--上传附件-->
<el-dialog width="400px" :visible.sync="uploadFileDialogVisible" title="上传附件">
<el-upload
drag
:on-success="uploadFileSuccess"
action="api/att/attFile/upload"
:before-upload="beforeUploadFile"
:show-file-list="true"
:on-format-error="handleFileFormatError"
name="file"
:file-list="defaultFileList"
ref="uploadFileNewDialog"
:on-exceed="onFileExceed"
:on-remove="onFileRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击或拖拽上传文件</div>
</el-upload>
<div slot="footer">
<el-button class="common-button-default" icon="el-icon-close" @click="uploadFileDialogVisible = false"> </el-button>
<el-button class="common-button-primary" icon="el-icon-check" type="primary" @click="submitUploadFile"> </el-button>
</div>
</el-dialog>
<!--导入-->
<el-dialog width="400px" :visible.sync="importFileDialogVisible" title="导入">
<el-upload
drag
:on-success="importFileSuccess"
action="api/lawss/sarStandCompareInfo/importFile"
:before-upload="beforeUploadFile"
:show-file-list="true"
:on-format-error="handleFileFormatError"
name="file"
:data="{compareBaseId: listId}"
ref="importFileNewDialog"
:on-exceed="onFileExceed"
:on-remove="onFileRemove"
:auto-upload="false"
destroy-on-close
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击或拖拽导入文件</div>
</el-upload>
<div slot="footer">
<el-button class="common-button-default" icon="el-icon-close" @click="handleImportFileCancel()"> </el-button>
<el-button class="common-button-primary" icon="el-icon-check" type="primary" @click="$refs['importFileNewDialog'].submit()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import StandardSelect from '@/pages/standardComparisonLibrary/components/StandardSelect'
import StandardView from '@/pages/standardComparisonLibrary/components/StandardView'
import CustomFile from '@/components/CustomFormComponents/File'
import ViewHeader from '@/pages/standardComparisonLibrary/components/ViewHeader'
import ViewBaseInfo from '@/pages/standardComparisonLibrary/components/ViewBaseInfo'
export default {
name: 'StandardComparisonLibraryView',
components: {
StandardSelect,
StandardView,
CustomFile,
ViewHeader,
ViewBaseInfo
},
data () {
return {
btnLoading: false,
importFileDialogVisible: false,
isEdit: false,
uploadFileDialogVisible: false,
viewStandardListDrawerVisible: false,
selectStandardDrawerVisible: false,
drawerEditCellFormDrawerVisible: false,
viewCellInfoDrawerVisible: false,
listId: '',
tableDataLoading: false,
viewListInfoDrawerVisible: false,
maintenanceListDrawerVisible: false,
total: 0,
tableHeight: 600,
drawerFormTitle: '',
selectRoleId: '',
searchForm: {
listName: '',
},
pageNo: 1,
pageSize: 10,
userList: [],
drawerFormDrawerVisible: false,
listVO: {
name: '',
uname: '',
createTime: '',
public: '',
standardList: '',
countryList: '',
fileList: [],
files: ''
},
listVOForReset: {
id: '',
name: '',
public: ''
},
uploadFileData: {
fileList: [],
files: ''
},
listVOFormRules: {
// name: [
// {required: true, message: '角色名称不能为空', trigger: 'blur'},
// {type: 'string', max: 20, message: '最多输入20位', trigger: 'blur'}
// ],
},
editCellForm: {
content: '',
files: ''
},
editCellFormForReset: {
content: '',
files: ''
},
editCellFormRules: {
// name: [
// {required: true, message: '角色名称不能为空', trigger: 'blur'},
// {type: 'string', max: 20, message: '最多输入20位', trigger: 'blur'}
// ],
},
tableList: [
{
contrastItemName: '对比项1'
}
],
maintenanceListDrawerForm: {
id: '',
natureList: [
{
value: ''
}
],
compareItemList: [
{
value: ''
}
]
},
maintenanceDeletedIds: [], // 维护Drawer中 被删掉的ID
tableColumns: []
}
},
computed: {
defaultFileList() {
const arr = this.listVO.fileList.map((file, index) => {
return {
id: file.id,
name: file.oldFileName,
url: file.filePath,
index: index
}
})
return arr
}
},
methods: {
// 更多
handleCommand (command) {
switch (command[1]) {
case '查看':
this.showRole(command[0])
break
case '编辑':
this.editTableRow(command[0])
break
case '删除':
this.deleteTableRow(command[0])
break
case '维护':
this.maintenanceTableRow(command[0])
break
}
},
// 查询、加载表格
queryTablePage () {
const formData = {
pageNo: this.pageNo,
pageSize: this.$store.getters.userInfo.configContent,
listName: this.searchForm.listName,
}
this.$http.get('lawss/sarStandCompareBase/page',
formData,
{
_this: this,
loading: 'tableDataLoading'
},
res => {
this.tableList = res.data.list
this.total = res.data.count
}, 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 }
this.drawerFormTitle = this.$t('m.comparisonListDrawerTitleNew')
this.drawerFormDrawerVisible = true
},
// 表格行 - 编辑
editTableRow (row) {
this.listVO = {
id: row.id,
name: row.listName,
public: row.publicFlag === '1'
}
this.drawerFormTitle = this.$t('m.comparisonListDrawerTitleEdit')
this.drawerFormDrawerVisible = true
},
// 批量删除
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: true,
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: true,
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) {
const formData = {
id: this.listVO.id,
listName: this.listVO.name,
publicFlag: this.listVO.public ? '1' : '0' // 0: 不公开 1: 公开
}
if (formData.id) {
// 修改角色信息
// 此处暂未实现
this.$http.postData('lawss/sarStandCompareBase/updateSarStandCompareBase', formData,
{
_this: this, loading: 'tableDataLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.drawerFormDrawerVisible = false
this.queryTablePage()
} else {
}
}
)
} else {
this.$http.postData('lawss/sarStandCompareBase/saveSarStandCompareBase', formData,
{
_this: this,
loading: 'tableDataLoading'
}, res => {
if (res.ok) {
this.drawerFormDrawerVisible = false
this.queryTablePage()
// this.$nextTick(() => {
// this.$refs['roleVO'].resetFields()
// })
} else {
}
})
}
} else {
}
})
},
// 查看角色信息
showRole (row) {
this.listVO = {
id: row.id,
name: row.listName,
public: row.publicFlag === '1'
}
this.drawerFormTitle = this.$t('m.comparisonListDrawerTitleView')
this.viewListInfoDrawerVisible = true
},
pageChange (page) {
this.pageNo = page
this.queryTablePage()
},
pageSizeChange () {
this.queryTablePage()
},
resetPageNo() {
this.pageNo = 1
},
/**
* 维护窗口, 获取维护数据, 并打开 drawer
* @param id listId
*/
maintenanceTableRow() {
const id = this.listId
// 重置删除IDS
this.maintenanceDeletedIds = []
this.queryMaintenanceList(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: 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: 'btnLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.maintenanceListDrawerVisible = false
this.resolveTableData()
} 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)
},
handleSelectStandardDrawerSubmit() {
this.btnLoading = true
this.$refs['standardSelect'].handleSubmit(() => {
this.resolveTableData()
this.btnLoading = false
})
},
handleSelectStandardDrawerCancel() {
this.$refs['standardSelect'].handleCancel()
},
queryTableData() {
const formData = {
compareBaseId: this.listId
}
return new Promise((resolve, reject) => {
this.$http.get('lawss/sarStandCompareInfo/getDetails', formData,
{
_this: this,
loading: 'tableDataLoading'
}, res => {
if (res.ok) {
resolve(res.data)
} else {
reject(res)
}
}, err => {
reject(err)
})
})
},
resolveTableData() {
return this.queryTableData().then(data => {
const contrastItem = data.ranksMap.ITEM || [], // 对比项
natureList = data.ranksMap.NATURE || [], // 特点
dataList = data.list, // 所有的单元格数据
countryMap = data.countryMap, // 国家及标准
natureColumns = []
// 1. 处理表头
const tableColumns = Object.keys(countryMap).map(country => {
const standardList = countryMap[country].map(standard => {
// 返回标准
return {
...standard,
label: standard.standNum,
children: natureList.map(nature => {
const data = {
...nature,
label: nature.proertyVal,
prop: `nature_${natureColumns.length}`,
__standard__: standard,
__country__: country
}
natureColumns.push(data)
// 返回特点
return data
}),
__country__: country
}
})
return {
label: country,
children: standardList
}
})
this.tableColumns = tableColumns
// 2. 处理行数据
const tableData = contrastItem.map(contrastItem => {
const data = {
contrastItem: contrastItem,
// ... nature_0.1.2.3 ...
}
natureColumns.forEach(nature => {
const dataCell = dataList.find(item => {
return item.natureId === nature.id
&& item.itemId === contrastItem.id
&& item.sarNumber === nature.__standard__.standNum
&& item.sarRegion === nature.__country__
})
const dataCell2 = dataCell || {}
data[nature['prop']] = {
...dataCell2,
__nature__: nature,
__contrastItem__: contrastItem
}
})
return data
})
this.tableList = tableData
})
},
queryListData() {
const formData = {
id: this.listId
}
return new Promise((resolve, reject) => {
this.$http.get('lawss/sarStandCompareBase/detailsHeaher', formData,
{
_this: this,
loading: 'tableDataLoading'
}, res => {
if (res.ok) {
resolve(res.data)
} else {
reject(res)
}
}, err => {
reject(err)
})
})
},
handleContentCellClick(row, column, cell, event) {
// 当节点是 特点 - 对比项 的交叉节点才会触发
if (column['property'] && column['property'].startsWith('nature_')) {
const cellData = row[column['property']]
console.log(cellData)
this.editCellForm = {
...cellData,
content: cellData.formContent,
files: cellData.formFile
}
if (this.isEdit) {
this.drawerEditCellFormDrawerVisible = true
} else {
this.viewCellInfoDrawerVisible = true
}
} else {
return
}
},
// 保存单元格信息
submitEditCellFormDrawer (name) {
this.$refs[name].validate((valid) => {
if (valid) {
const formData = {
id: this.editCellForm.id,
formContent: this.editCellForm.content,
formFile: this.editCellForm.files,
compareId: this.listId,
sarId: this.editCellForm.__nature__.__standard__.id,
natureId: this.editCellForm.__nature__.id,
itemId: this.editCellForm.__contrastItem__.id
}
this.$http.postData('lawss/sarStandCompareInfo/updateCell', formData,
{
_this: this, loading: 'tableDataLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.drawerEditCellFormDrawerVisible = false
this.resolveTableData()
} else {
}
}
)
} else {
}
})
},
downloadFile (attId) {
if (attId != null && attId !== '') {
window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
} else {
this.$message.error('请选择要下载的文件')
}
},
exportExcel () {
window.location.href = '/api/lawss/sarStandCompareInfo/export?type=1&compareBaseId=' + this.listId
},
downloadTemplate () {
window.location.href = '/api/lawss/sarStandCompareInfo/export?type=0&compareBaseId=' + this.listId
},
/**
* 上传文件成功
* @param response
* @param file
*/
uploadFileSuccess (response, file) {
if (response.ok) {
this.$message({
message: response.message,
type: 'success'
})
this.uploadFileData["files"] += response.data.id + ','
this.uploadFileData['fileList'] = {
id: response.data.id,
name: response.data.oldFileName,
url: response.data.filePath,
index: this.uploadFileData['fileList'].length
}
} else {
this.$refs.uploadFileNewDialog.clearFiles()
this.$message({
message: response.message,
type: 'warning'
})
}
},
/**
* 导入文件成功
* @param response
* @param file
*/
importFileSuccess (response, file) {
this.$refs.importFileNewDialog.clearFiles()
if (response.ok) {
this.$message({
message: response.message,
type: 'success'
})
this.importFileDialogVisible = false
this.resolveTableData()
} else {
this.$message({
message: response.message,
type: 'warning'
})
}
},
/**
* 上传文件之前的回调
* @param file
* @returns {boolean}
*/
beforeUploadFile (file) {
// var filename = file.name
// var index1 = filename.lastIndexOf('.')
// var index2 = filename.length
// var fileSuffix = filename.substring(index1, index2)
// // const fileSuffix = file.name.split('.')[1] // 后缀名
// // 判断上传文件格式
// // if (fileSuffix === 'pdf' || fileSuffix === 'PDF' || fileSuffix === 'doc' || fileSuffix === 'docx' || fileSuffix === 'ppt' || fileSuffix === 'pptx') {
// if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
// return true
// } else {
// this.$message.error('文件' + file.name + '格式不正确,请上传xls、xlsx文件')
// return false
// }
// 判断文件上传大小
if (file.size <= 1024 * 1024 * 300) {// eslint-disable-line
return true
} else {
this.$message.error('文件' + file.name + '大小不超过200M')
return false
}
return true
},
// 导入标准文件格式错误执行
handleFileFormatError (file) {
this.$message.error('文件格式不正确')
},
onFileExceed() {
this.$message.error('最多上传一个文件')
},
onFileRemove(file, fileList) {
// console.log('remove', file)
// this.form.files = ''
// this.form.fileName = ''
const fileIds = this.uploadFileData.files.split(file.id + ','),
fileList2 = this.uploadFileData.fileList
fileList2.splice(file.index, 1)
this.uploadFileData.fileList = fileList2
this.uploadFileData.files = fileIds.join('')
},
openUploadFileDialog(){
this.uploadFileData = {
...this.listVO,
fileList: [...this.listVO.fileList]
}
this.uploadFileDialogVisible = true
},
submitUploadFile() {
const formData = {
id: this.listId,
relatedDoc: this.uploadFileData.files
}
this.$http.postData('lawss/sarStandCompareBase/updateSarStandCompareBase', formData,
{
_this: this, loading: 'tableDataLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
this.uploadFileDialogVisible = false
this.resolveFileData()
} else {
}
}
)
},
resolveFileData() {
this.tableDataLoading = true
this.queryListData().then(res => {
const listData = res
this.listVO = {
...this.listVO,
fileList: listData.relatedDocList || [],
files: listData.relatedDoc || ''
}
this.tableDataLoading = false
}).catch(err => {
this.tableDataLoading = false
})
},
handleContrastItemRemove(row) {
console.log(row)
// 此处需要confirm功能
this.$confirm('确定删除这一对比项?', '请选择', {
confirmButtonText: '确定',
confirmButtonClass: 'common-button-primary',
cancelButtonText: '取消',
roundButton: true,
type: 'warning'
}).then(() => {
const itemId = row['contrastItem'].id
this.deleteContrastItemOrNature(itemId)
}).catch(() => {
})
},
handleNatureRemove(id) {
// 此处需要confirm功能
this.$confirm('确定删除这一特点?', '请选择', {
confirmButtonText: '确定',
confirmButtonClass: 'common-button-primary',
cancelButtonText: '取消',
roundButton: true,
type: 'warning'
}).then(() => {
const natureId = id
this.deleteContrastItemOrNature(natureId)
}).catch(() => {
})
},
deleteContrastItemOrNature(id) {
const formData = {
ids: id
}
this.$http.post('lawss/sarStandCompareNature/deletesSarStandCompareNature', formData,
{
_this: this, loading: 'tableDataLoading'
}, res => {
if (res.ok) {
// this.closeDrawer()
// this.$message.success('删除成功')
this.resolveTableData()
} else {
}
}
)
},
handleImportFileCancel() {
this.importFileDialogVisible = false
this.$refs['importFileNewDialog'].clearFiles()
}
},
created () {
this.listId = this.$route.params.listId
Promise.all([this.queryListData(), this.resolveTableData()]).then(values => {
const [listData] = values
this.listVO = {
...listData,
name: listData.listName || '',
uname: listData.uname || '',
createTime: listData.creationTime || '',
public: listData.publicFlag === '0' ? '不公开' : '公开',
standardList: listData.standInvolved || '',
countryList: listData.countryInvolved || '',
fileList: listData.relatedDocList || [],
files: listData.relatedDoc || '',
content: listData.content || ''
}
})
// this.queryTablePage()
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/mixins';
.view-standard-comparison-library {
height: calc(100% - 10px);
display: flex;
flex-direction: column;
.content {
flex: 1;
overflow: hidden;
padding: 0 10px 10px 10px;
}
}
.operation-btn-group {
display: inline-block;
}
.has-operation {
width: calc(~'100% - 90px');
}
.see-drawer-Multiple-val, .see-info-Multiple-val {
& > .files-title{
height: 50px;
line-height: 50px;
font-size: 16px;
color: #409EFF;
& > a{
cursor: pointer;
}
& > i{
display: inline-block;
margin-left: 3px;
width: 18px;
height: 16px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
vertical-align: sub;
cursor: pointer;
}
.icon-download{
background-image: url("~assets/images/shangqi/img/download.png");
}
.icon-download2{
background-image: url("~assets/images/shangqi/img/download2.png");
}
}
}
/*基础信息 样式*/
.see-info-content{
padding: 0 19px;
.see-info-div{
border-bottom: 1px solid #E5E5E5;
.see-info-name{
display: inline-block;
width: 130px;
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
color: #333333;
vertical-align: top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.see-info-val{
display: inline-block;
width: calc(~'100% - 135px');
padding: 15px;
//height: 50px;
line-height: 1.2;
font-size: 16px;
color: #333333;
//overflow: hidden;
//white-space: nowrap;
//text-overflow: ellipsis;
}
.see-info-Multiple-val{
display: inline-block;
width: calc(~'100% - 135px');
padding-left: 15px;
.see-info-val{
display: block;
width: 100%;
}
}
}
}
::v-deep {
.s-r-drawer {
.el-drawer__header {
padding: 10px 15px;
}
.demo-drawer-content {
padding: 0 !important;
.search-item {
.el-input__inner {
width: 175px;
}
}
}
}
}
</style>