12 changed files with 1163 additions and 485 deletions
-
79src/assets/styles/archives-manage.scss
-
75src/assets/styles/yxk-admin.scss
-
353src/views/components/archivesDetail/anjuan.vue
-
153src/views/components/archivesDetail/juannei.vue
-
353src/views/components/archivesDetail/project.vue
-
340src/views/components/archivesDetail/uploadFile/index.vue
-
93src/views/system/processManage/historicalProcess/index.vue
-
2src/views/system/processManage/modelDesign/index.vue
-
10src/views/system/processManage/runningProcess/module/businessDetails/index.vue
-
9src/views/system/processManage/runningProcess/module/detail.vue
-
13src/views/system/processManage/runningProcess/module/taskList/index.vue
-
166src/views/system/processManage/runningProcess/module/taskList/module/detail.vue
@ -0,0 +1,353 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose"> |
|||
<div class="setting-dialog"> |
|||
<div class="detail-tab tab-content"> |
|||
<!-- tab --> |
|||
<ul class="tab-nav"> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件列表</li> |
|||
<!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> --> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|||
</ul> |
|||
<!-- 基本信息 --> |
|||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|||
<el-row> |
|||
<el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|||
<span>{{ item.fieldCnName }}：</span> |
|||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="isDetailsInfo"> |
|||
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|||
<span>{{ item.fieldCnName }}：</span> |
|||
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|||
<div v-if="item.context.indexOf(',')"> |
|||
<el-tag |
|||
v-for="(val,key) in item.context.split(',')" |
|||
:key="key" |
|||
:type="val" |
|||
effect="dark" |
|||
> |
|||
{{ val }} |
|||
</el-tag> |
|||
</div> |
|||
<div v-else-if="!item.context.indexOf(',')"> |
|||
<el-tag effect="dark">{{ item.context }}</el-tag> |
|||
</div> |
|||
</div> |
|||
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|||
{{ item.context }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<!-- 附件 --> |
|||
<!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|||
<!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|||
<div v-if="archivesTabIndex==1"> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="min-width: 100%" |
|||
height="500" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="isType" label="所属表" align="center" /> |
|||
<el-table-column prop="group" label="所属全宗" min-width="60" align="center" /> |
|||
<el-table-column prop="category" label="门类名称" min-width="85" align="center" /> |
|||
<el-table-column prop="number" label="档号" min-width="85" align="center" /> |
|||
<el-table-column prop="title" label="题名" show-overflow-tooltip min-width="140" align="center" /> |
|||
</el-table> |
|||
<!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" --> |
|||
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" /> |
|||
</div> |
|||
<!-- 元数据 --> |
|||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|||
<pre v-highlightjs="xml_show"> |
|||
<code class="highlight_s"> |
|||
{[xml_show]} |
|||
</code> |
|||
</pre> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="archivesInfoVisible=false">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<JuanneiDetail ref="juanneiDetail" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|||
import JuanneiDetail from './juannei.vue' |
|||
export default { |
|||
name: 'ArchivesInfo', |
|||
components: { JuanneiDetail }, |
|||
mixins: [ |
|||
form({}) |
|||
], |
|||
props: { |
|||
categoryId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
detailTitle: '', |
|||
isHasFile: false, // 卷内/文件才有附件 |
|||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|||
archivesInfoVisible: false, |
|||
archivesTabIndex: 0, |
|||
archivesDetailsData: [], |
|||
archivesDetailsMetadata: [], |
|||
xml_show: null, |
|||
page: { |
|||
total: 0, |
|||
size: 10, |
|||
page: 1 |
|||
}, |
|||
tableData: [ |
|||
{ |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
} |
|||
], // list |
|||
selections: [] // table - 选中的 |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getDetial(rowId) { |
|||
const params = { |
|||
// categoryId: this.categoryId, |
|||
categoryId: 'B073E8430B85B4821E7360', |
|||
// archivesId: rowId |
|||
archivesId: '2946C34412182B73FBC287' |
|||
} |
|||
FetchArchivesDetails(params).then(data => { |
|||
this.archivesDetailsData = data |
|||
// 案卷 / 文件的借阅状态 |
|||
this.archivesDetailsData.forEach(item => { |
|||
if (item.fieldName === 'borrow_type') { |
|||
if (item.context === 1) { |
|||
item.context = '待登记' |
|||
} else if (item.context === 2) { |
|||
item.context = '待借阅' |
|||
} else if (item.context === 3) { |
|||
item.context = '待归还' |
|||
} else if (item.context === 4 || item.context === '' || item.context === null) { |
|||
item.context = '-' |
|||
} else if (item.context === -1) { |
|||
item.context = '在库' |
|||
} |
|||
} |
|||
}) |
|||
// 如果是卷内 - 不显示‘tid’/'借阅状态' |
|||
if (!this.isTidOrBorrow) { |
|||
const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') |
|||
const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') |
|||
this.archivesDetailsData.splice(indexBorrow, 1) |
|||
this.archivesDetailsData.splice(indexTid, 1) |
|||
} |
|||
}) |
|||
FetchArchivesMetadata(params).then(data => { |
|||
this.archivesDetailsMetadata = data |
|||
}) |
|||
}, |
|||
setXml() { |
|||
const xmlstr = this.archivesDetailsMetadata |
|||
// console.log('xmlstr:', xmlstr) |
|||
// console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
|||
// console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
|||
// this.xml_show = vkbeautify.xml(xmlstr) |
|||
this.xml_show = this.showXml(xmlstr) |
|||
}, |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
if (this.archivesTabIndex === 2) { |
|||
this.setXml() |
|||
} |
|||
this.$nextTick(() => { |
|||
if (this.$refs.uploadFile) { |
|||
this.$refs.uploadFile.tableData = [] |
|||
this.$refs.uploadFile.getFileList() |
|||
} |
|||
}) |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.archivesInfoVisible = false |
|||
done() |
|||
}, |
|||
// xml格式化 |
|||
showXml(str) { |
|||
var that = this |
|||
var text = str |
|||
// 去掉多余的空格 |
|||
text = |
|||
'\n' + |
|||
text |
|||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|||
}) |
|||
.replace(/>\s*?</g, '>\n<') |
|||
// 把注释编码 |
|||
text = text |
|||
.replace(/\n/g, '\r') |
|||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|||
var ret = '<!--' + escape(text) + '-->' |
|||
return ret |
|||
}) |
|||
.replace(/\r/g, '\n') |
|||
|
|||
// 调整格式 |
|||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|||
var nodeStack = [] |
|||
var output = text.replace(rgx, function( |
|||
$0, |
|||
all, |
|||
name, |
|||
isBegin, |
|||
isCloseFull1, |
|||
isCloseFull2, |
|||
isFull1, |
|||
isFull2 |
|||
) { |
|||
var isClosed = |
|||
isCloseFull1 === '/' || |
|||
isCloseFull2 === '/' || |
|||
isFull1 === '/' || |
|||
isFull2 === '/' |
|||
var prefix = '' |
|||
if (isBegin === '!') { |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
} else { |
|||
if (isBegin !== '/') { |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
if (!isClosed) { |
|||
nodeStack.push(name) |
|||
} |
|||
} else { |
|||
nodeStack.pop() |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
} |
|||
} |
|||
var ret = '\n' + prefix + all |
|||
return ret |
|||
}) |
|||
var outputText = output.substring(1) |
|||
// 把注释还原并解码，调格式 |
|||
outputText = outputText |
|||
.replace(/\n/g, '\r') |
|||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|||
text = unescape(text).replace(/\r/g, '\n') |
|||
var ret = |
|||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|||
return ret |
|||
}) |
|||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|||
return outputText |
|||
}, |
|||
getPrefix(prefixIndex) { |
|||
var span = ' ' |
|||
var output = [] |
|||
for (var i = 0; i < prefixIndex; ++i) { |
|||
output.push(span) |
|||
} |
|||
return output.join('') |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.juanneiDetail.archivesInfoVisible = true |
|||
this.$refs.juanneiDetail.getDetial() |
|||
this.$refs.juanneiDetail.detailTitle = '文件详情' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.base-info, |
|||
.metadata-cont{ |
|||
background-color: #F6F8FC; |
|||
} |
|||
|
|||
// .metadata-cont{ |
|||
// overflow: hidden; |
|||
// overflow-y: scroll; |
|||
// } |
|||
|
|||
// 档案详情 |
|||
.base-info{ |
|||
padding: 20px 0; |
|||
.base-info-item{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-bottom: 20px; |
|||
color: #545B65; |
|||
span{ |
|||
display: block; |
|||
width: 120px; |
|||
margin-right: 5px; |
|||
text-align: right; |
|||
color: #0C0E1E; |
|||
} |
|||
} |
|||
} |
|||
|
|||
code.hljs { |
|||
color: #0C0E1E !important; |
|||
height: 530px !important; |
|||
} |
|||
::v-deep .hljs-name{ |
|||
color: #0C0E1E !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,353 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose"> |
|||
<div class="setting-dialog"> |
|||
<div class="detail-tab tab-content"> |
|||
<!-- tab --> |
|||
<ul class="tab-nav"> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">案卷列表</li> |
|||
<!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> --> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li> |
|||
</ul> |
|||
<!-- 基本信息 --> |
|||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|||
<el-row> |
|||
<el-col v-for="(item,index) in archivesDetailsData" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|||
<span>{{ item.fieldCnName }}：</span> |
|||
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-if="isDetailsInfo"> |
|||
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|||
<span>{{ item.fieldCnName }}：</span> |
|||
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|||
<div v-if="item.context.indexOf(',')"> |
|||
<el-tag |
|||
v-for="(val,key) in item.context.split(',')" |
|||
:key="key" |
|||
:type="val" |
|||
effect="dark" |
|||
> |
|||
{{ val }} |
|||
</el-tag> |
|||
</div> |
|||
<div v-else-if="!item.context.indexOf(',')"> |
|||
<el-tag effect="dark">{{ item.context }}</el-tag> |
|||
</div> |
|||
</div> |
|||
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|||
{{ item.context }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<!-- 附件 --> |
|||
<!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|||
<!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> --> |
|||
<div v-if="archivesTabIndex==1"> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="min-width: 100%" |
|||
height="500" |
|||
@row-click="clickRowHandler" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="isType" label="所属表" align="center" /> |
|||
<el-table-column prop="group" label="所属全宗" min-width="60" align="center" /> |
|||
<el-table-column prop="category" label="门类名称" min-width="85" align="center" /> |
|||
<el-table-column prop="number" label="档号" min-width="85" align="center" /> |
|||
<el-table-column prop="title" label="题名" show-overflow-tooltip min-width="140" align="center" /> |
|||
</el-table> |
|||
<!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" --> |
|||
<el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" /> |
|||
</div> |
|||
<!-- 元数据 --> |
|||
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
|||
<pre v-highlightjs="xml_show"> |
|||
<code class="highlight_s"> |
|||
{[xml_show]} |
|||
</code> |
|||
</pre> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="archivesInfoVisible=false">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<AnjuanDetail ref="anjuanDetail" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|||
import AnjuanDetail from './anjuan.vue' |
|||
export default { |
|||
name: 'ArchivesInfo', |
|||
components: { AnjuanDetail }, |
|||
mixins: [ |
|||
form({}) |
|||
], |
|||
props: { |
|||
categoryId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
detailTitle: '', |
|||
isHasFile: false, // 卷内/文件才有附件 |
|||
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
|||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|||
archivesInfoVisible: false, |
|||
archivesTabIndex: 0, |
|||
archivesDetailsData: [], |
|||
archivesDetailsMetadata: [], |
|||
xml_show: null, |
|||
page: { |
|||
total: 0, |
|||
size: 10, |
|||
page: 1 |
|||
}, |
|||
tableData: [ |
|||
{ |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
}, { |
|||
isType: '卷案表', |
|||
group: ' 全宗A', |
|||
category: '文书档案（案卷）', |
|||
number: 'DAS-Y-2020-001', |
|||
title: '人事劳资文件级文书档案人事' |
|||
} |
|||
], // list |
|||
selections: [] // table - 选中的 |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
getDetial(rowId) { |
|||
const params = { |
|||
// categoryId: this.categoryId, |
|||
categoryId: 'B073E8430B85B4821E7360', |
|||
// archivesId: rowId |
|||
archivesId: '2946C34412182B73FBC287' |
|||
} |
|||
FetchArchivesDetails(params).then(data => { |
|||
this.archivesDetailsData = data |
|||
// 案卷 / 文件的借阅状态 |
|||
this.archivesDetailsData.forEach(item => { |
|||
if (item.fieldName === 'borrow_type') { |
|||
if (item.context === 1) { |
|||
item.context = '待登记' |
|||
} else if (item.context === 2) { |
|||
item.context = '待借阅' |
|||
} else if (item.context === 3) { |
|||
item.context = '待归还' |
|||
} else if (item.context === 4 || item.context === '' || item.context === null) { |
|||
item.context = '-' |
|||
} else if (item.context === -1) { |
|||
item.context = '在库' |
|||
} |
|||
} |
|||
}) |
|||
// 如果是卷内 - 不显示‘tid’/'借阅状态' |
|||
if (!this.isTidOrBorrow) { |
|||
const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') |
|||
const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') |
|||
this.archivesDetailsData.splice(indexBorrow, 1) |
|||
this.archivesDetailsData.splice(indexTid, 1) |
|||
} |
|||
}) |
|||
FetchArchivesMetadata(params).then(data => { |
|||
this.archivesDetailsMetadata = data |
|||
}) |
|||
}, |
|||
setXml() { |
|||
const xmlstr = this.archivesDetailsMetadata |
|||
// console.log('xmlstr:', xmlstr) |
|||
// console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
|||
// console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
|||
// this.xml_show = vkbeautify.xml(xmlstr) |
|||
this.xml_show = this.showXml(xmlstr) |
|||
}, |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
if (this.archivesTabIndex === 2) { |
|||
this.setXml() |
|||
} |
|||
this.$nextTick(() => { |
|||
if (this.$refs.uploadFile) { |
|||
this.$refs.uploadFile.tableData = [] |
|||
this.$refs.uploadFile.getFileList() |
|||
} |
|||
}) |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.archivesInfoVisible = false |
|||
done() |
|||
}, |
|||
// xml格式化 |
|||
showXml(str) { |
|||
var that = this |
|||
var text = str |
|||
// 去掉多余的空格 |
|||
text = |
|||
'\n' + |
|||
text |
|||
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) { |
|||
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1') |
|||
}) |
|||
.replace(/>\s*?</g, '>\n<') |
|||
// 把注释编码 |
|||
text = text |
|||
.replace(/\n/g, '\r') |
|||
.replace(/<!--(.+?)-->/g, function($0, text) { |
|||
var ret = '<!--' + escape(text) + '-->' |
|||
return ret |
|||
}) |
|||
.replace(/\r/g, '\n') |
|||
|
|||
// 调整格式 |
|||
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm |
|||
var nodeStack = [] |
|||
var output = text.replace(rgx, function( |
|||
$0, |
|||
all, |
|||
name, |
|||
isBegin, |
|||
isCloseFull1, |
|||
isCloseFull2, |
|||
isFull1, |
|||
isFull2 |
|||
) { |
|||
var isClosed = |
|||
isCloseFull1 === '/' || |
|||
isCloseFull2 === '/' || |
|||
isFull1 === '/' || |
|||
isFull2 === '/' |
|||
var prefix = '' |
|||
if (isBegin === '!') { |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
} else { |
|||
if (isBegin !== '/') { |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
if (!isClosed) { |
|||
nodeStack.push(name) |
|||
} |
|||
} else { |
|||
nodeStack.pop() |
|||
prefix = that.getPrefix(nodeStack.length) |
|||
} |
|||
} |
|||
var ret = '\n' + prefix + all |
|||
return ret |
|||
}) |
|||
var outputText = output.substring(1) |
|||
// 把注释还原并解码，调格式 |
|||
outputText = outputText |
|||
.replace(/\n/g, '\r') |
|||
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) { |
|||
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1) |
|||
text = unescape(text).replace(/\r/g, '\n') |
|||
var ret = |
|||
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->' |
|||
return ret |
|||
}) |
|||
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n') |
|||
return outputText |
|||
}, |
|||
getPrefix(prefixIndex) { |
|||
var span = ' ' |
|||
var output = [] |
|||
for (var i = 0; i < prefixIndex; ++i) { |
|||
output.push(span) |
|||
} |
|||
return output.join('') |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.anjuanDetail.archivesInfoVisible = true |
|||
this.$refs.anjuanDetail.getDetial() |
|||
this.$refs.anjuanDetail.detailTitle = '案卷详情' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.base-info, |
|||
.metadata-cont{ |
|||
background-color: #F6F8FC; |
|||
} |
|||
|
|||
// .metadata-cont{ |
|||
// overflow: hidden; |
|||
// overflow-y: scroll; |
|||
// } |
|||
|
|||
// 档案详情 |
|||
.base-info{ |
|||
padding: 20px 0; |
|||
.base-info-item{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-bottom: 20px; |
|||
color: #545B65; |
|||
span{ |
|||
display: block; |
|||
width: 120px; |
|||
margin-right: 5px; |
|||
text-align: right; |
|||
color: #0C0E1E; |
|||
} |
|||
} |
|||
} |
|||
|
|||
code.hljs { |
|||
color: #0C0E1E !important; |
|||
height: 530px !important; |
|||
} |
|||
::v-deep .hljs-name{ |
|||
color: #0C0E1E !important; |
|||
} |
|||
</style> |
|||
@ -1,340 +0,0 @@ |
|||
<template> |
|||
<div class="upload-file"> |
|||
<!-- 上传附件curd --> |
|||
<div v-if="isUploadDetail" class="upload-curd"> |
|||
<div class="upload-btn"> |
|||
<el-button icon="el-icon-plus" size="small" type="primary">添加</el-button> |
|||
<input id="upFile" type="file" name="upFile" @change="changeFile($event)"> |
|||
</div> |
|||
<el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button> |
|||
<el-button icon="el-icon-sort" @click="showSort">排序</el-button> |
|||
</div> |
|||
|
|||
<!--表格渲染--> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="min-width: 100%" |
|||
height="calc(100vh - 382px)" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" /> |
|||
<el-table-column prop="file_type" label="格式" min-width="60" align="center" /> |
|||
<el-table-column prop="file_size" label="大小" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center" /> |
|||
<el-table-column prop="file_thumbnail" label="缩览图" min-width="60" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'"> |
|||
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
|||
</div> |
|||
<div v-else> |
|||
<svg-icon icon-class="fujian" class-name="svg-style" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="create_time" label="创建时间" min-width="110" align="center" /> |
|||
<el-table-column v-if="!isUploadDetail && !recycleMain.isRecycle" label="操作" min-width="100" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 点击缩略图看大图 --> |
|||
<el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;"> |
|||
<img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg"> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 排序 --> |
|||
<el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i> |
|||
<el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="file_name" label="文件名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 删除附件 --> |
|||
<el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<div class="dialog-delt"> |
|||
<p><span>确定删除已选择的附件吗？</span></p> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList' |
|||
import { archivesUpload } from '@/utils/upload' |
|||
import { downloadFile, getCurrentTime } from '@/utils/index' |
|||
import { mapGetters } from 'vuex' |
|||
import { form } from '@crud/crud' |
|||
import Sortable from 'sortablejs' |
|||
export default { |
|||
name: 'UploadFile', |
|||
components: {}, |
|||
mixins: [ |
|||
form({}) |
|||
], |
|||
inject: ['recycleMain'], |
|||
props: { |
|||
isUploadDetail: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
categoryId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"', |
|||
tableData: [], // 附件list |
|||
selections: [], // table - 选中的 |
|||
showCoverVisible: false, // 查看大图dialog |
|||
sortTableData: [], // 排序data |
|||
sortVisible: false, // 排序dialog |
|||
deleteVisible: false, // 删除附件 dialog |
|||
deleteData: [], // 删除选中的data |
|||
file: null, // 附件 change |
|||
fileNames: '', // 附件 - name |
|||
formatType: '', // 附件 - type |
|||
postfix: '', // 附件 - 文件后缀 |
|||
fileSize: '', // 附件 - 大小 |
|||
filePath: '', // 附件 - path |
|||
px: '', // 附件 - 分辨率 |
|||
nowDate: '', // 当前时间 |
|||
previewSrc: '' // 查看大图src |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
watch: { |
|||
arcId: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
methods: { |
|||
// 选择附件 |
|||
async changeFile(e) { |
|||
this.file = e.target.files[0] |
|||
this.fileSize = this.file.size |
|||
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
|||
this.fileNames = this.file.name |
|||
this.postfix = this.file.name.substring( |
|||
this.fileNames.lastIndexOf('.') + 1, |
|||
this.fileNames.length |
|||
) |
|||
if (this.formatType === 'image') { |
|||
const fileBase64 = await this.getBase64(this.file) |
|||
const res = await this.getImgPx(fileBase64) |
|||
this.px = res.width + 'px*' + res.height + 'px' |
|||
} else { |
|||
this.px = '' |
|||
} |
|||
// 上传附件 |
|||
archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => { |
|||
if (res.data.code === 200) { |
|||
this.filePath = res.data.data |
|||
this.uploadSave() |
|||
} |
|||
}) |
|||
}, |
|||
// 上传附件 - 选择上传即保存 |
|||
uploadSave() { |
|||
this.nowDate = getCurrentTime() |
|||
const json = { |
|||
'file_name': this.fileNames, |
|||
'file_size': this.fileSize, |
|||
'file_type': this.postfix, |
|||
'file_path': this.filePath, |
|||
'sequence': null, |
|||
'archive_id': this.arcId, |
|||
'file_dpi': this.px, |
|||
'file_thumbnail': '', |
|||
'create_time': this.nowDate, |
|||
'id': null |
|||
} |
|||
const arrayUpload = [] |
|||
arrayUpload.push(json) |
|||
const params = { |
|||
'categoryId': this.categoryId, |
|||
'jsonString': JSON.stringify(arrayUpload) |
|||
} |
|||
FetchEditFile(params).then(data => { |
|||
this.$message.success('上传附件成功!') |
|||
this.crud.refresh() |
|||
this.getFileList() |
|||
}) |
|||
}, |
|||
// 将上传的图片转为base64 |
|||
getBase64(file) { |
|||
const reader = new FileReader() |
|||
reader.readAsDataURL(file) |
|||
return new Promise((resolve) => { |
|||
reader.onload = () => { |
|||
resolve(reader.result) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取图片的分辨率 |
|||
getImgPx(img) { |
|||
const image = new Image() |
|||
image.src = img |
|||
return new Promise((resolve) => { |
|||
image.onload = () => { |
|||
const width = image.width |
|||
const height = image.height |
|||
resolve({ width, height }) |
|||
} |
|||
}) |
|||
}, |
|||
// 上传list |
|||
getFileList() { |
|||
const params = { |
|||
'categoryId': this.categoryId, |
|||
'archiveId': this.arcId |
|||
} |
|||
FetchInitArchiveFilesView(params).then(data => { |
|||
this.tableData = data.returnlist |
|||
}) |
|||
}, |
|||
// 下载附件 |
|||
downloadFile(row) { |
|||
const url = this.baseApi + '/downloadFile' + row.file_path |
|||
fetch(url).then(res => res.blob()).then(blob => { |
|||
downloadFile(blob, row.file_name.split('.')[0], row.file_type) |
|||
}).catch(() => { |
|||
this.$message.error('下载文件失败!') |
|||
}) |
|||
}, |
|||
// 选择删除 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
}, |
|||
// 确认删除 |
|||
handleDeltConfirm() { |
|||
this.deleteVisible = false |
|||
const ids = [] |
|||
this.deleteData.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
const params = { |
|||
'ids': ids, |
|||
'categoryId': this.categoryId |
|||
} |
|||
// 删除fetch |
|||
FetchDeleteFile(params).then(res => { |
|||
this.crud.delAllLoading = false |
|||
this.$message.success('删除成功!') |
|||
this.crud.refresh() |
|||
this.getFileList() |
|||
}) |
|||
}, |
|||
// 排序 - 行拖拽 |
|||
rowDrop(className, targetName) { |
|||
// 此时找到的元素是要拖拽元素的父容器 |
|||
const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') |
|||
const that = this |
|||
Sortable.create(tbody, { |
|||
// 指定父元素下可被拖拽的子元素 |
|||
draggable: '.el-table__row', |
|||
onEnd({ newIndex, oldIndex }) { |
|||
if (newIndex === oldIndex) return |
|||
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0]) |
|||
} |
|||
}) |
|||
}, |
|||
// 排序 |
|||
opened() { |
|||
this.rowDrop('file-sort', 'sortTableData') |
|||
}, |
|||
showSort() { |
|||
this.sortVisible = true |
|||
this.sortTableData = JSON.parse(JSON.stringify(this.tableData)) |
|||
}, |
|||
// 排序 - 保存 |
|||
handleSort() { |
|||
const ids = [] |
|||
const sequences = [] |
|||
this.sortTableData.map((value, index) => { |
|||
ids.push(value.id) |
|||
sequences.push(index + 1) |
|||
}) |
|||
const params = { |
|||
'categoryId': this.categoryId, |
|||
'ids': ids, |
|||
'sequences': sequences |
|||
} |
|||
FetchFileSort(params).then((res) => { |
|||
this.sortVisible = false |
|||
this.$message.success('附件排序成功!') |
|||
this.crud.refresh() |
|||
this.getFileList() |
|||
}) |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
// dialog - close |
|||
handleClose(done) { |
|||
this.showCoverVisible = false |
|||
done() |
|||
}, |
|||
// 查看大图 |
|||
showCoverPreview(row) { |
|||
this.showCoverVisible = true |
|||
this.previewSrc = this.baseApi + '/downloadFile' + row.file_path |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.svg-style{ |
|||
width: 60px; |
|||
height: 32px; |
|||
} |
|||
</style> |
|||
@ -1,9 +1,98 @@ |
|||
<template> |
|||
<div>历史流程</div> |
|||
<div> |
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<div class="head-search"> |
|||
<el-input v-model="query.name" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|||
<el-select |
|||
v-model="query.value1" |
|||
multiple |
|||
collapse-tags |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<date-range-picker v-model="query.createTime" class="date-item" /> |
|||
<rrOperation /> |
|||
</div> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
:data="crud.data" |
|||
row-key="id" |
|||
@select="crud.selectChange" |
|||
@select-all="crud.selectAllChange" |
|||
@cell-dblclick="tableDoubleClick" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column label="流程名称" prop="name" /> |
|||
<el-table-column label="实列ID" prop="instanceID" /> |
|||
<el-table-column label="任务ID" prop="serviceID " /> |
|||
<el-table-column label="发起人" prop="initiators" /> |
|||
<el-table-column prop="createTime" label="启动时间"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="crud.data.length!==0" /> |
|||
<Detail ref="processDetail" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CRUD, { presenter, header, crud } from '@crud/crud' |
|||
import rrOperation from '@crud/RR.operation' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
import pagination from '@crud/Pagination' |
|||
import Detail from '../runningProcess/module/detail' |
|||
|
|||
export default { |
|||
name: 'RunningProcess', |
|||
components: { rrOperation, DateRangePicker, pagination, Detail }, |
|||
cruds() { |
|||
return CRUD({ title: '运行中流程', url: 'api/dept', crudMethod: {}}) |
|||
}, |
|||
mixins: [presenter(), header(), crud()], |
|||
data() { |
|||
return { |
|||
options: [{ |
|||
value: '选项1', |
|||
label: '流程A' |
|||
}, { |
|||
value: '选项2', |
|||
label: '流程B' |
|||
}, { |
|||
value: '选项3', |
|||
label: '流程C' |
|||
}, { |
|||
value: '选项4', |
|||
label: '流程D' |
|||
}], |
|||
permission: { |
|||
add: ['admin', 'dept:add'], |
|||
edit: ['admin', 'dept:edit'], |
|||
del: ['admin', 'dept:del'] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.processDetail.detailVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog class="detail-dialog" title="任务详情" :close-on-click-modal="false" :visible.sync="taskDetailVisible" append-to-body :before-close="handleClose"> |
|||
<div class="setting-dialog"> |
|||
<div class="detail-tab tab-content"> |
|||
<!-- tab --> |
|||
<ul class="tab-nav"> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基础信息</li> |
|||
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">变量列表</li> |
|||
</ul> |
|||
<!-- 基本信息 --> |
|||
<div v-if="archivesTabIndex==0" class="base-info item-content"> |
|||
<el-row> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>任务名：</span> |
|||
<p>XXXXX档案题名（文件）</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>执行人：</span> |
|||
<p>admin</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>创建时间：</span> |
|||
<p>2020-10-01 10:26:32</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>完成时间：</span> |
|||
<p>2020-10-01 10:26:32</p> |
|||
</el-col> |
|||
<el-col :span="12" class="base-info-item"> |
|||
<span>状态：</span> |
|||
<p>已完成</p> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div v-if="archivesTabIndex==1"> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="min-width: 100%" |
|||
height="500" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="name" label="变量名" align="center" /> |
|||
<el-table-column prop="value" label="变量值" min-width="60" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="taskDetailVisible=false">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TaskDetail', |
|||
props: { |
|||
categoryId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isTidOrBorrow: true, // 卷内不显示tid/借阅状态 |
|||
taskDetailVisible: false, |
|||
archivesTabIndex: 0, |
|||
page: { |
|||
total: 0, |
|||
size: 10, |
|||
page: 1 |
|||
}, |
|||
tableData: [ |
|||
{ |
|||
name: '变量A', |
|||
value: '值A' |
|||
}, |
|||
{ |
|||
name: '变量B', |
|||
value: '值B' |
|||
}, |
|||
{ |
|||
name: '变量C', |
|||
value: '值C' |
|||
}, |
|||
{ |
|||
name: '变量D', |
|||
value: '值D' |
|||
} |
|||
], // list |
|||
selections: [] // table - 选中的 |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
}, |
|||
// 删除 - 关闭 |
|||
handleClose(done) { |
|||
this.taskDetailVisible = false |
|||
done() |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.base-info, |
|||
.metadata-cont{ |
|||
background-color: #F6F8FC; |
|||
} |
|||
|
|||
// .metadata-cont{ |
|||
// overflow: hidden; |
|||
// overflow-y: scroll; |
|||
// } |
|||
|
|||
// 档案详情 |
|||
.base-info{ |
|||
padding: 20px 0; |
|||
.base-info-item{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-bottom: 20px; |
|||
color: #545B65; |
|||
span{ |
|||
display: block; |
|||
width: 120px; |
|||
margin-right: 5px; |
|||
text-align: right; |
|||
color: #0C0E1E; |
|||
} |
|||
} |
|||
} |
|||
|
|||
code.hljs { |
|||
color: #0C0E1E !important; |
|||
height: 530px !important; |
|||
} |
|||
::v-deep .hljs-name{ |
|||
color: #0C0E1E !important; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue