43 changed files with 4347 additions and 132 deletions
-
126src/assets/styles/yxk-admin.scss
-
123src/views/system/archivesCategory/descriptionPreview/index.vue
-
9src/views/system/archivesCategory/index.vue
-
2src/views/system/archivesClassify/index.vue
-
21src/views/system/fileLibraryField/commonFields/index.vue
-
21src/views/system/fileLibraryField/electronicFields/index.vue
-
57src/views/system/fileLibraryField/index.vue
-
21src/views/system/fileLibraryField/systemFields/index.vue
-
97src/views/system/fileLibraryManage/baseInfo/index.vue
-
186src/views/system/fileLibraryManage/descriptionPreview/index.vue
-
232src/views/system/fileLibraryManage/fieldManage/index.vue
-
66src/views/system/fileLibraryManage/fieldManage/module/form.vue
-
56src/views/system/fileLibraryManage/fieldManage/module/quickSetting.vue
-
176src/views/system/fileLibraryManage/fileNoFormat/index.vue
-
84src/views/system/fileLibraryManage/fileNoFormat/module/form.vue
-
72src/views/system/fileLibraryManage/fileNoFormat/module/sortDialog.vue
-
204src/views/system/fileLibraryManage/form.vue
-
290src/views/system/fileLibraryManage/index.vue
-
228src/views/system/fileLibraryManage/listBrowsing/index.vue
-
97src/views/system/fileLibraryManage/listBrowsing/module/form.vue
-
72src/views/system/fileLibraryManage/listBrowsing/module/sortDialog.vue
-
202src/views/system/fileLibraryManage/orderingRule/index.vue
-
69src/views/system/fileLibraryManage/orderingRule/module/form.vue
-
72src/views/system/fileLibraryManage/orderingRule/module/sortDialog.vue
-
76src/views/system/fileLibraryManage/sortDialog.vue
-
21src/views/system/subjectLibraryField/commonFields/index.vue
-
21src/views/system/subjectLibraryField/electronicFields/index.vue
-
57src/views/system/subjectLibraryField/index.vue
-
21src/views/system/subjectLibraryField/systemFields/index.vue
-
192src/views/system/subjectLibraryManage/descriptionPreview/index.vue
-
232src/views/system/subjectLibraryManage/fieldManage/index.vue
-
66src/views/system/subjectLibraryManage/fieldManage/module/form.vue
-
56src/views/system/subjectLibraryManage/fieldManage/module/quickSetting.vue
-
176src/views/system/subjectLibraryManage/fileNoFormat/index.vue
-
84src/views/system/subjectLibraryManage/fileNoFormat/module/form.vue
-
72src/views/system/subjectLibraryManage/fileNoFormat/module/sortDialog.vue
-
82src/views/system/subjectLibraryManage/index.vue
-
228src/views/system/subjectLibraryManage/listBrowsing/index.vue
-
97src/views/system/subjectLibraryManage/listBrowsing/module/form.vue
-
72src/views/system/subjectLibraryManage/listBrowsing/module/sortDialog.vue
-
202src/views/system/subjectLibraryManage/orderingRule/index.vue
-
69src/views/system/subjectLibraryManage/orderingRule/module/form.vue
-
72src/views/system/subjectLibraryManage/orderingRule/module/sortDialog.vue
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="常用字段" :is-type="2" permission-str="commonFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'CommonFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="电子文件字段" :is-type="3" permission-str="electronicFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'ElectronicFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="app-container tab-container"> |
|||
<div class="tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<span class="right-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">常用字段<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">系统字段<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">电子文件字段<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
</ul> |
|||
<component :is="comName" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import commonFields from './commonFields/index.vue' |
|||
import systemFields from './systemFields/index.vue' |
|||
import electronicFields from './electronicFields/index.vue' |
|||
|
|||
export default { |
|||
name: 'FileLibraryField', |
|||
components: { |
|||
commonFields, |
|||
electronicFields, |
|||
systemFields |
|||
}, |
|||
data() { |
|||
return { |
|||
activeIndex: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 0) { |
|||
return 'commonFields' |
|||
} else if (this.activeIndex === 1) { |
|||
return 'systemFields' |
|||
} else if (this.activeIndex === 2) { |
|||
return 'electronicFields' |
|||
} |
|||
return 'commonFields' |
|||
} |
|||
}, |
|||
methods: { |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="系统字段" :is-type="1" permission-str="systemFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'SystemFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<div class="system-base-info" style="display:flex; justify-content: flex-start;"> |
|||
<div class="base-info-left"> |
|||
<div class="info-item"> |
|||
<span>名称：</span> |
|||
<p>{{ selectedCategory.cnName }}</p> |
|||
</div> |
|||
<div class="info-item"> |
|||
<span>节点类型：</span> |
|||
<p v-if="selectedCategory.isType == 1">文件夹</p> |
|||
<p v-else-if="selectedCategory.isType == 2">项目</p> |
|||
<p v-else-if="selectedCategory.isType == 3">案卷</p> |
|||
<p v-else-if="selectedCategory.isType == 4">卷内</p> |
|||
<p v-else-if="selectedCategory.isType == 5">文件</p> |
|||
<p v-else /> |
|||
</div> |
|||
<!-- v-if="selectedCategory.pid !== '0'" --> |
|||
<div class="info-item"> |
|||
<span>所属父级：</span> |
|||
<p>{{ selectedCategory.parentName ? selectedCategory.parentName : '-' }}</p> |
|||
</div> |
|||
<div class="info-item info-content"> |
|||
<span>备注：</span> |
|||
<p>{{ selectedCategory.remark ? selectedCategory.remark : '-' }}</p> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="base-info-right"> |
|||
<div v-if="selectedCategory.isType !== 1" class="info-item"> |
|||
<span>档号规则：</span> |
|||
<p>{{ fileNoFormatStr }}</p> |
|||
</div> |
|||
<div v-if="selectedCategory.isType !== 1" class="info-item"> |
|||
<span>编码：</span> |
|||
<p>WS01</p> |
|||
</div> |
|||
<div v-if="selectedCategory.isType !== 1" class="info-item"> |
|||
<span>整理方式：</span> |
|||
<p>按件整理</p> |
|||
</div> |
|||
<div v-if="selectedCategory.isType !== 1" class="info-item"> |
|||
<span>是否装盒：</span> |
|||
<p>装盒</p> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getNoFormatField } from '@/api/category/fileNoFormat' |
|||
export default { |
|||
name: 'BaseInfo', |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return { |
|||
cnName: '', |
|||
isType: '', |
|||
parentName: '', |
|||
isColumnLength: '', |
|||
remark: '' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fileNoFormatStr: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
if (newValue && newValue.id) { |
|||
this.initData() |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.selectedCategory && this.selectedCategory.id) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => { |
|||
this.fileNoFormatStr = '' |
|||
res.forEach((item) => { |
|||
this.fileNoFormatStr += item.fieldCnName + item.connector |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div class="category-main"> |
|||
<div class="des-preview-left"> |
|||
<div class="des-title"> |
|||
<p>字段调整 输入字段</p> |
|||
</div> |
|||
<ul class="des-fields"> |
|||
<li v-for="(item,index) in allFieldsData" v-show="item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)"> |
|||
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> |
|||
<p>{{ item.fieldCnName }}</p> |
|||
</el-tooltip> |
|||
</li> |
|||
</ul> |
|||
<div class="des-title"> |
|||
<p @click="isCollaspeHiddenFields = !isCollaspeHiddenFields">非输入字段 <i :class="['el-icon-arrow-down', isCollaspeHiddenFields ?'el-icon-arrow-down':'arrow-up']" /></p> |
|||
</div> |
|||
<!-- 收起展开 --> |
|||
<el-collapse-transition> |
|||
<ul v-show="!isCollaspeHiddenFields" class="des-fields"> |
|||
<li v-for="(item,index) in allFieldsData" v-show="!item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)"> |
|||
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> |
|||
<p>{{ item.fieldCnName }}</p> |
|||
</el-tooltip> |
|||
</li> |
|||
</ul> |
|||
</el-collapse-transition> |
|||
<div class="des-set-btn"> |
|||
<el-button type="primary" icon="iconfont icon-bianji" @click="settingForm">编辑</el-button> |
|||
<el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu" @click="previewFormVisible = true">排序</el-button> |
|||
</div> |
|||
<SettingForm :is-disabled="true" :is-add="false" :this-fields="thisFields" /> |
|||
</div> |
|||
<div class="des-preview-right"> |
|||
<div class="des-title"> |
|||
<p>界面预览效果</p> |
|||
</div> |
|||
<PreviewForm ref="previewForm1" :is-has-code="true" :is-disabled="false" :form-preview-data.sync="isInputFields" :selected-category="selectedCategory" :is-des-form-type="isDesFormType" /> |
|||
</div> |
|||
|
|||
<!-- 修改字段 --> |
|||
<el-dialog class="edit-form-dialog" :visible="settingFormVisible" :before-close="handleClose" :close-on-click-modal="false" title="修改字段"> |
|||
<div class="setting-dialog"> |
|||
<SettingForm ref="editForm" :is-disabled="false" :is-add="false" :this-fields="editField" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" :loading="loading" @click="editSubmit">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 界面字段预览排序 --> |
|||
<el-dialog class="preview-dialog sort-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" title="著录界面排序"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<!-- <PreviewForm :is-disabled="true" :all-fields-data="allFieldsData" .sync/> --> |
|||
<PreviewForm ref="previewForm" :is-has-code="true" :is-disabled="false" :is-draggable="true" :form-preview-data="JSON.parse(JSON.stringify(isInputFields))" :is-des-form-type="isDesFormType" :selected-category="selectedCategory" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import PreviewForm from '@/views/components/category/PreviewForm' |
|||
import SettingForm from '@/views/components/category/SettingForm' |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { edit } from '@/api/category/fieldManage' |
|||
import { previewFormOrder } from '@/api/category/listBrowsing' |
|||
export default { |
|||
name: 'DescriptionPreview', |
|||
components: { PreviewForm, SettingForm }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
allFieldsData: [], |
|||
isCollaspeHiddenFields: true, // 隐藏字段收起展开 |
|||
settingFormVisible: false, // 修改编辑字段 - dialog |
|||
previewFormVisible: false, // 界面预览form - dialog |
|||
fieldsActive: 0, // 当前字段index |
|||
thisFields: { dictionaryConfigId: { dicName: null, id: null }}, // 当前项字段内容 |
|||
editField: {}, |
|||
isInputFields: [], |
|||
loading: false, |
|||
isDesFormType: 'category' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.getArchivesType() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getArchivesType() |
|||
}, |
|||
methods: { |
|||
getArchivesType(setField) { |
|||
// 门类切换时，表单校验清除 |
|||
this.$refs.previewForm1.$refs['addOrUpdateForm'].clearValidate() |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then(res => { |
|||
this.allFieldsData.splice(0, this.allFieldsData.length) |
|||
this.isInputFields.splice(0, this.isInputFields.length) |
|||
if (!setField) { |
|||
setField = false |
|||
} |
|||
res.sort(this.compare).forEach((item, index) => { |
|||
// 防止对应字典是null时报错 |
|||
item.dictionaryConfigId = item.dictionaryConfigId || { dicName: null, id: null } |
|||
this.allFieldsData.push(item) |
|||
if (item.isInput && !setField) { |
|||
this.fieldsActive = index |
|||
this.thisFields = item |
|||
setField = true |
|||
} |
|||
if (item.isInput) { |
|||
this.isInputFields.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
handleClose(done) { |
|||
this.settingFormVisible = false |
|||
this.previewFormVisible = false |
|||
// this.editResetForm() |
|||
done() |
|||
}, |
|||
compare(a, b) { |
|||
return a.isSequence - b.isSequence |
|||
}, |
|||
settingForm() { |
|||
this.editField = JSON.parse(JSON.stringify(this.thisFields)) |
|||
this.settingFormVisible = true |
|||
}, |
|||
// 当前选中的字段 |
|||
selectField(index) { |
|||
this.hiddenFieldsActive = -1 |
|||
this.fieldsActive = index |
|||
this.thisFields = this.allFieldsData[this.fieldsActive] |
|||
}, |
|||
// 修改字段"保存"提交 |
|||
editSubmit() { |
|||
this.$refs['editForm'].$refs['form'].validate(valid => { |
|||
if (!valid) { |
|||
return |
|||
} |
|||
this.loading = true |
|||
edit(this.editField).then(() => { |
|||
this.loading = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.settingFormVisible = false |
|||
// 清空数组数据 |
|||
this.allFieldsData.splice(0, this.allFieldsData.length) |
|||
this.getArchivesType(true) |
|||
this.thisFields = this.editField |
|||
}) |
|||
}) |
|||
return false |
|||
}, |
|||
handleSort() { |
|||
const sortParam = this.$refs.previewForm.formPreviewData.map((item, index) => { |
|||
return { |
|||
isSequence: index + 1, |
|||
id: item.id |
|||
} |
|||
}) |
|||
previewFormOrder(sortParam).then(() => { |
|||
this.previewFormVisible = false |
|||
this.getArchivesType() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission" crud-tag="field"> |
|||
<template v-slot:right> |
|||
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button> |
|||
<el-button size="mini" @click="toQuick"><i class="iconfont icon-kuaisushezhi" />快速设置</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 302px)" crud-tag="field" @selection-change="selectionChangeHandler" @row-click="clickRowHandler"> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column type="index" label="序号" width="55" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" min-width="145" show-overflow-tooltip /> |
|||
<el-table-column prop="fieldName" label="字段标识" min-width="145" show-overflow-tooltip /> |
|||
<el-table-column label="数据类型" min-width="85"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.isDataType === 1">字符</span> |
|||
<span v-if="scope.row.isDataType === 2">数字</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isColumnLength" label="字段长度" min-width="85" /> |
|||
<el-table-column label="著录形式" min-width="85"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.isInputClass === 'select'">下拉框</span> |
|||
<span v-if="scope.row.isInputClass === 'text'">文本框</span> |
|||
<span v-if="scope.row.isInputClass === 'date'">日期框</span> |
|||
<span v-if="scope.row.isInputClass === 'number'">数字框</span> |
|||
<span v-if="scope.row.isInputClass === 'popover'">弹出框</span> |
|||
<span v-if="scope.row.isInputClass === 'textarea'">文本域</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dictionaryConfigId.dicName" label="对应字典" min-width="85" show-overflow-tooltip /> |
|||
<el-table-column prop="editLength" label="显示长度" min-width="85" /> |
|||
<el-table-column label="显示一整行" min-width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isLine" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="输入字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isInput" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="必填字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRequired" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="自动生成" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isAuto" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="自动补零" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isFilling" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="fillingDigit" label="位数" min-width="55" align="center" :formatter="digitFormatter" /> |
|||
<el-table-column label="值不重复" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRepeat" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm crud-tag="field" /> |
|||
<quickSetting ref="quick" /> |
|||
<el-dialog title="删除字段" :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="handleConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import fieldCrudMethod from '@/api/category/fieldManage' |
|||
import eForm from './module/form' |
|||
import quickSetting from './module/quickSetting' |
|||
import CRUD, { presenter } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
|
|||
export default { |
|||
components: { eForm, quickSetting, crudOperation }, |
|||
mixins: [ |
|||
presenter() |
|||
], |
|||
cruds() { |
|||
return CRUD({ |
|||
tag: 'field', |
|||
url: 'api/arc-dic/manage', |
|||
crudMethod: fieldCrudMethod, |
|||
title: '字段', |
|||
optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
download: false, |
|||
group: false |
|||
} |
|||
}) |
|||
}, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'fieldManage:add'], |
|||
edit: ['admin', 'fieldManage:edit'], |
|||
del: ['admin', 'fieldManage:edit'] |
|||
}, |
|||
deleteVisible: false, |
|||
deleteData: {}, |
|||
delLoading: false |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.crud.refresh() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取数据前设置默认参数 |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.crud.query.categoryId = this.selectedCategory.id |
|||
this.crud.query.isType = 2 |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
crud.data.forEach(function(item, index) { |
|||
item.dictionaryConfigId = item.dictionaryConfigId || { id: null } |
|||
}) |
|||
}, |
|||
[CRUD.HOOK.beforeValidateCU](crud) { |
|||
// 页面重复添加信息时，下拉框的校验会存在，需要手工取消 |
|||
crud.findVM('form').$refs['editForm'].$refs['form'].validate(valid => { |
|||
if (!valid) { |
|||
return |
|||
} |
|||
if (crud.status.add === CRUD.STATUS.PREPARED) { |
|||
crud.doAdd() |
|||
} else if (crud.status.edit === CRUD.STATUS.PREPARED) { |
|||
crud.doEdit() |
|||
} |
|||
}) |
|||
return false |
|||
}, |
|||
[CRUD.HOOK.beforeSubmit]() { |
|||
if (this.crud.status.add > CRUD.STATUS.NORMAL) { |
|||
this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1 |
|||
} |
|||
}, |
|||
[CRUD.HOOK.beforeToCU]() { |
|||
if (this.crud.findVM('form').$refs['editForm']) { |
|||
this.crud.findVM('form').$refs['editForm'].$refs['form'].clearValidate() |
|||
} |
|||
}, |
|||
clickRowHandler(row) { |
|||
this.$refs.fieldTable.clearSelection() |
|||
this.$refs.fieldTable.toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val) { |
|||
if (val.length > 1) { |
|||
// 取出最后val的最后一个返回出来 |
|||
const finalVal = val.pop() |
|||
// 清除所有选中 |
|||
this.$refs.fieldTable.clearSelection() |
|||
// 给最后一个加上选中 |
|||
this.$refs.fieldTable.toggleRowSelection(finalVal) |
|||
this.crud.selectionChangeHandler([finalVal]) |
|||
} else { |
|||
this.crud.selectionChangeHandler(val) |
|||
} |
|||
}, |
|||
toDelete(data) { |
|||
if (data[0].isSystem) { |
|||
this.$message({ |
|||
message: '系统字段不可删除', |
|||
type: 'warning', |
|||
duration: 2500 |
|||
}) |
|||
return |
|||
} |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
}, |
|||
handleConfirm() { |
|||
this.deleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
this.crud.doDelete(this.deleteData) |
|||
}, |
|||
handleClose(done) { |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
digitFormatter(row, column, cellValue) { |
|||
return cellValue || '-' |
|||
}, |
|||
toQuick() { |
|||
this.$refs.quick.quickTableData = JSON.parse(JSON.stringify(this.crud.data)) |
|||
this.$refs.quick.quickVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// ::v-deep thead .el-table-column--selection .cell { |
|||
// display: none; |
|||
// } |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<el-dialog class="field-setting-dialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<SettingForm ref="editForm" :is-disabled="false" :is-add="crud.status.add === 1" :this-fields="form" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="crud.cancelCU"> |
|||
取消 |
|||
</el-button> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import SettingForm from '@/views/components/category/SettingForm' |
|||
|
|||
const defaultForm = { |
|||
id: null, |
|||
fieldName: null, |
|||
fieldCnName: null, |
|||
isDefaultValue: null, |
|||
isInputClass: 'text', |
|||
isDataType: null, |
|||
isDataTypeDetails: null, |
|||
isColumnLength: null, |
|||
isColumnType: 1, |
|||
isSequence: null, |
|||
isType: 2, |
|||
isSystem: true, |
|||
isLine: false, |
|||
isInput: true, |
|||
isRequired: false, |
|||
isAutomatic: false, |
|||
isAdd: null, |
|||
isSearch: null, |
|||
isInherit: null, |
|||
isFilling: false, |
|||
fillingDigit: null, |
|||
isRepeat: null, |
|||
isDisplay: false, |
|||
displayOrder: null, |
|||
isDisplayformat: null, |
|||
displayformatType: null, |
|||
editLength: 196, |
|||
displayLength: null, |
|||
dictionaryConfigId: { |
|||
id: null |
|||
} |
|||
} |
|||
export default { |
|||
components: { SettingForm }, |
|||
mixins: [ |
|||
form(function() { |
|||
return Object.assign({ categoryId: this.$parent.selectedCategory.id }, defaultForm) |
|||
}) |
|||
], |
|||
data() { |
|||
return { |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog title="快速设置" :visible.sync="quickVisible"> |
|||
<div class="setting-dialog"> |
|||
<el-table :data="quickTableData" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
<el-table-column prop="fieldName" label="字段标识" /> |
|||
<el-table-column label="输入字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isInput" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="必填字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRequired" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="quickVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
quickVisible: false, |
|||
quickTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
handleSort() { |
|||
this.quickTableData.forEach((item, index) => { |
|||
item.sequence = index + 1 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog .el-dialog__body{ |
|||
padding-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="组成字段" align="center" /> |
|||
<el-table-column prop="connector" label="组成符号" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
</div> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { getNoFormatField, del } from '@/api/category/fileNoFormat' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'fileNoFormat:add'], |
|||
edit: ['admin', 'fileNoFormat:edit'], |
|||
del: ['admin', 'fileNoFormat:delete'], |
|||
sort: ['admin', 'fileNoFormat:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
created() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => { |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.forEach((item) => { |
|||
if (!item.isDisplayformat && item.isInput && !item.isAutomatic) { |
|||
this.table.left.data.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
res.forEach((item) => { |
|||
this.table.right.data.push(item) |
|||
}) |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
this.table.left.selections.forEach((item) => { |
|||
Vue.set(item, 'connector', '-') |
|||
Vue.set(item, 'categoryId', this.selectedCategory.id) |
|||
}) |
|||
this.$refs.cuform.title = '新增档号规则' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑档号规则' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections |
|||
del(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.initData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="formData" :model="formData" size="small" label-width="90px"> |
|||
<el-row v-for="(item) in formData.fields" :key="item.id"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="组成字段"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="组成符号"> |
|||
<el-input v-model="item.connector" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { add, edit } from '@/api/category/fileNoFormat' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '新增档号规则', |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.loading = true |
|||
if (this.title === '新增档号规则') { |
|||
const addData = this.formData.fields.map((item) => { |
|||
return { |
|||
dictionaryId: item.id, |
|||
fieldName: item.fieldName, |
|||
fieldCnName: item.fieldCnName, |
|||
connector: item.connector, |
|||
categoryId: item.categoryId |
|||
} |
|||
}) |
|||
add(addData).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} else { |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.fields-list { |
|||
max-height: calc(100vh - 312px); |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="fileno-format-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/fileNoFormat' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('fileno-format-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.sequence = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
|||
<el-row> |
|||
<el-form-item label="所属父级" prop="parentName"> |
|||
<el-input v-model="selectedCategory.parentName" disabled /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item label="名称" prop="cnName"> |
|||
<el-input v-model="form.cnName" /> |
|||
</el-form-item> |
|||
<el-form-item label="节点类型" prop="isType"> |
|||
<!-- :disabled="crud.status.edit === 1" --> |
|||
<!-- @change="changeType" --> |
|||
<el-select v-model="form.isType" style="width: 225px;"> |
|||
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="编码" prop="code"> |
|||
<el-input v-model="form.code" /> |
|||
</el-form-item> --> |
|||
<!-- <el-row v-if="isAdd"> |
|||
<el-form-item label="是否装盒" prop="packing"> |
|||
<el-radio-group v-model="form.packing" style="width: 580px;"> |
|||
<el-radio label="1">装盒</el-radio> |
|||
<el-radio label="0">不装盒</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row v-if="isAdd"> |
|||
<el-form-item label="整理方式" prop="makeType"> |
|||
<el-radio-group v-model="form.makeType" style="width: 580px;"> |
|||
<el-radio label="piece">按件整理</el-radio> |
|||
<el-radio label="volumes">按卷整理</el-radio> |
|||
<el-radio label="project">项目管理（三层）</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-row> --> |
|||
<!-- <el-form-item v-if="crud.status.add === 1" label="选择模板" prop="templateId"> |
|||
<treeselect v-model="form.templateId" :flat="true" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.isType !== 6" :normalizer="normalizer" :default-expand-level="2" @select="updateTemplateValue" /> |
|||
</el-form-item> --> |
|||
<el-form-item label="备注"> |
|||
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
// getCategoryType |
|||
// import { getCategoryTree } from '@/api/category/category' |
|||
import { form } from '@crud/crud' |
|||
import CRUD from '@crud/crud' |
|||
// import Treeselect from '@riophae/vue-treeselect' |
|||
// import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
// code: null, packing: '1', makeType: 'piece', templateId: null |
|||
const defaultForm = { id: null, parentName: null, cnName: null, isType: null, remark: null } |
|||
export default { |
|||
// components: { Treeselect }, |
|||
mixins: [ |
|||
form(function() { |
|||
return Object.assign({ pid: this.pid }, defaultForm) |
|||
}) |
|||
], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
pid: null, |
|||
// isAdd: false, |
|||
rules: { |
|||
parentLevel: [ |
|||
{ required: true, message: '所属父级不可为空', trigger: 'blur' } |
|||
], |
|||
cnName: [ |
|||
{ required: true, message: '名称不可为空', trigger: 'blur' } |
|||
], |
|||
isType: [ |
|||
{ required: true, message: '节点类型不可为空', trigger: 'change' } |
|||
], |
|||
// code: [ |
|||
// { required: true, message: '编码不可为空', trigger: 'blur' } |
|||
// ], |
|||
packing: [ |
|||
{ required: true, message: '请选择是否装盒', trigger: 'change' } |
|||
], |
|||
makeType: [ |
|||
{ required: true, message: '请选择装盒类型', trigger: 'change' } |
|||
] |
|||
}, |
|||
selectOptions: [ |
|||
{ |
|||
value: '1', |
|||
label: '分类' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '文件夹' |
|||
} |
|||
], |
|||
templateTree: [], |
|||
selectedTemplateNode: {} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getSelectOptions() |
|||
}, |
|||
methods: { |
|||
// 新建时，判断当前节点类型，“门类类型” option区分可选 |
|||
beforeToAdd() { |
|||
this.form.isType = null |
|||
if (this.selectedCategory.isType === 1) { |
|||
this.selectOptions.forEach(item => { |
|||
if (item.value === 4) { |
|||
item.typeState = true |
|||
} else { |
|||
item.typeState = false |
|||
} |
|||
}) |
|||
} else if (this.selectedCategory.isType === 2) { |
|||
this.selectOptions.forEach(item => { |
|||
if (item.value !== 3) { |
|||
item.typeState = true |
|||
} else { |
|||
item.typeState = false |
|||
} |
|||
}) |
|||
this.form.isType = 3 |
|||
} else if (this.selectedCategory.isType === 3) { |
|||
this.selectOptions.forEach(item => { |
|||
if (item.value !== 4) { |
|||
item.typeState = true |
|||
} else { |
|||
item.typeState = false |
|||
} |
|||
}) |
|||
this.form.isType = 4 |
|||
} |
|||
}, |
|||
[CRUD.HOOK.beforeSubmit]() { |
|||
if (this.form.templateId) { |
|||
this.form.children = [this.selectedTemplateNode] |
|||
} else { |
|||
this.form.children = null |
|||
} |
|||
}, |
|||
updateTemplateValue(node, instanceId) { |
|||
this.selectedTemplateNode = node |
|||
}, |
|||
// changeType() { |
|||
// // this.isAdd = this.form.isType === '1' |
|||
// // if (this.form.isType === 6) { |
|||
// // // this.crudDict.getDicts() |
|||
// // this.getTemplateTree() |
|||
// // } else { |
|||
// // this.form.dicExplain = null |
|||
// // } |
|||
// }, |
|||
// getTemplateTree() { |
|||
// getCategoryTree().then(res => { |
|||
// this.templateTree = res |
|||
// }) |
|||
// }, |
|||
getSelectOptions() { |
|||
// getCategoryType().then(res => { |
|||
// for (const key in res) { |
|||
// this.selectOptions.push({ |
|||
// value: Number(key), |
|||
// label: res[key], |
|||
// typeState: false |
|||
// }) |
|||
// } |
|||
// }) |
|||
} |
|||
// normalizer(node) { |
|||
// if (node.children && !node.children.length) { |
|||
// delete node.children |
|||
// } |
|||
// return { |
|||
// id: node.id, |
|||
// label: node.cnName, |
|||
// children: node.children, |
|||
// isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5 |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<div class="app-container category-container"> |
|||
<!-- 门类列表 --> |
|||
<div class="container-main"> |
|||
<div class="elect-cont-left"> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:left> |
|||
<!-- crud.selections.length === 0 || crud.selections[0].isType === 2 || crud.selections[0].isType === 3 || crud.selections[0].isType === 5 --> |
|||
<el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0 || crud.selections[0].isType !== 1" @click="crud.toAdd"> |
|||
<i class="iconfont icon-xinzeng" /> |
|||
新增 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 4" @click="crud.toEdit(crud.selections[0])"> |
|||
<i class="iconfont icon-bianji" /> |
|||
编辑 |
|||
</el-button> |
|||
</template> |
|||
<template v-slot:right> |
|||
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0 || (crud.selections.length === 1 && crud.selections[0].pid === '0' ) || crud.selections[0].isType === 4" @click="toDelete(crud.selections)"> |
|||
<i class="iconfont icon-shanchu" /> |
|||
删除 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 5" @click="toSort(crud.selections)">排序</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<div class="container-left"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!--门类树状结构--> |
|||
<div class="tree-scroll"> |
|||
<el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
|||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|||
<span v-if="data.isType===1 " class="iconFolder"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
<span v-if="data.isType===2 || data.isType === 3 || data.isType===5" class="iconArch"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
<span v-if="data.isType===4" class="iconFile"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
</span> |
|||
</el-tree> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 门类管理tab --> |
|||
<div class="elect-cont-right"> |
|||
<div class="container-right tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li> |
|||
<li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">字段管理<i /></li> |
|||
<li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 2}" @click="changeActiveTab(2)">著录界面设置<i /></li> |
|||
<li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 3}" @click="changeActiveTab(3)">列表界面设置<i /></li> |
|||
<li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 4}" @click="changeActiveTab(4)">排序规则设置<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
</ul> |
|||
<component :is="comName" :selected-category="selectedCategory" /> |
|||
</div> |
|||
</div> |
|||
<!--修改新增表单组件--> |
|||
<eForm ref="eform" :selected-category="selectedCategory" /> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :before-close="handleClose"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将删除当前所选分类项及其子集</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<el-dialog class="tip-dialog" title="确认删除" :visible.sync="reconfirmDeleteVisible" :before-close="handleClose"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">删除后，会永久清除此门类的相关设置及报表，请谨慎操作！</p> |
|||
<span>提示：为确保档案安全，必须先手工删除此门类的所有档案数据。</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="reconfirmDeleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleReconfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @treeNodeSort="treeNodeSort" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudCategory from '@/api/category/category' |
|||
import CRUD, { presenter, header } from '@crud/crud' |
|||
import eForm from './form' |
|||
import sortDialog from './sortDialog' |
|||
import baseInfo from './baseInfo/index' |
|||
import fieldManage from './fieldManage/index' |
|||
import descriptionPreview from './descriptionPreview/index' |
|||
import listBrowsing from './listBrowsing/index' |
|||
import orderingRule from './orderingRule/index' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
name: 'FileLibraryManage', |
|||
components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview, listBrowsing, orderingRule }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '分类', url: 'api/archives-type/menu', |
|||
crudMethod: { ...crudCategory }, |
|||
optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
download: false, |
|||
group: false |
|||
} |
|||
}) |
|||
] |
|||
}, |
|||
mixins: [presenter(), header()], |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'category:add'], |
|||
edit: ['admin', 'category:edit'], |
|||
del: ['admin', 'category:del'], |
|||
sort: ['admin', 'category:sort'] |
|||
}, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'cnName' |
|||
}, |
|||
deleteVisible: false, |
|||
reconfirmDeleteVisible: false, |
|||
selectedCategory: {}, |
|||
deleteData: {}, |
|||
activeIndex: 0, |
|||
sortLoading: false, |
|||
brotherNodeNum: 0 |
|||
// sortTableData: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 0) { |
|||
return 'baseInfo' |
|||
} else if (this.activeIndex === 1) { |
|||
return 'fieldManage' |
|||
} else if (this.activeIndex === 2) { |
|||
return 'descriptionPreview' |
|||
} else if (this.activeIndex === 3) { |
|||
return 'listBrowsing' |
|||
} else if (this.activeIndex === 4) { |
|||
return 'orderingRule' |
|||
} |
|||
return 'baseInfo' |
|||
} |
|||
}, |
|||
methods: { |
|||
// 逆归实现 获取指定元素 |
|||
findNode(tree, func) { |
|||
for (const node of tree) { |
|||
if (func(node)) return node |
|||
if (node.children) { |
|||
const res = this.findNode(node.children, func) |
|||
if (res) return res |
|||
} |
|||
} |
|||
return null |
|||
}, |
|||
// 展开选中的父级 |
|||
expandParents(node) { |
|||
node.expanded = true |
|||
if (node.parent) { |
|||
this.expandParents(node.parent) |
|||
} |
|||
}, |
|||
[CRUD.HOOK.afterRefresh]() { |
|||
let currentKey |
|||
if (localStorage.getItem('currentCategoryKey')) { |
|||
currentKey = JSON.parse(localStorage.getItem('currentCategoryKey')) |
|||
} else { |
|||
if (this.crud.data[0].isType === 1) { |
|||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|||
return node.isType !== 1 |
|||
}) |
|||
} else { |
|||
currentKey = this.crud.data[0] |
|||
} |
|||
} |
|||
// 设置某个节点的当前选中状态 |
|||
this.$refs.tree.setCurrentKey(currentKey.id) |
|||
this.$nextTick(() => { |
|||
// 设置某个节点的父级展开 |
|||
const selectedKey = this.$refs.tree.getCurrentNode() |
|||
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
|||
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
|||
} |
|||
// 选中节点的门类详情 |
|||
this.handleNodeClick(selectedKey) |
|||
}) |
|||
}, |
|||
// 选中门类后，设置门类详情数据 |
|||
handleNodeClick(val) { |
|||
if (val) { |
|||
this.crud.selectionChangeHandler([val]) |
|||
this.$refs.eform.pid = val.id |
|||
this.selectedCategory = val |
|||
console.log(this.selectedCategory) |
|||
if (val.pid !== '0') { |
|||
Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName) |
|||
} |
|||
this.changeActiveTab(0) |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentCategoryKey', JSON.stringify(val)) |
|||
if (this.$refs.tree.getNode(val.pid) && this.$refs.tree.getNode(val.pid).childNodes) { |
|||
this.brotherNodeNum = this.$refs.tree.getNode(val.pid).childNodes.length |
|||
} |
|||
} |
|||
}, |
|||
// 新增 - 判断当前节点类型，卷内/文件不可新建 |
|||
[CRUD.HOOK.beforeToAdd](crud, form, btn) { |
|||
const isCanAddKey = JSON.parse(localStorage.getItem('currentCategoryKey')) |
|||
if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) { |
|||
this.$message({ |
|||
message: '此门类下不可新建门类', |
|||
type: 'error', |
|||
duration: 2500 |
|||
}) |
|||
return false |
|||
} |
|||
this.$refs.eform.beforeToAdd() |
|||
}, |
|||
// 新增/编辑后 - 新增后默认选中新增的门类 |
|||
[CRUD.HOOK.afterSubmit](crud, addedCategory) { |
|||
if (addedCategory) { |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentCategoryKey', JSON.stringify(addedCategory)) |
|||
} |
|||
}, |
|||
treeNodeSort(data) { |
|||
this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data))) |
|||
}, |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
}, |
|||
handleConfirm() { |
|||
this.deleteVisible = false |
|||
setTimeout(() => { |
|||
this.reconfirmDeleteVisible = true |
|||
}, 300) |
|||
}, |
|||
handleReconfirm() { |
|||
this.reconfirmDeleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
this.crud.doDelete(this.deleteData).then((res) => { |
|||
// 清空缓存的门类节点 |
|||
localStorage.removeItem('currentCategoryKey') |
|||
}) |
|||
}, |
|||
handleClose(done) { |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
toSort(data) { |
|||
this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].pid).data.children |
|||
this.$refs.sort.sortVisible = true |
|||
}, |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tree-scroll{ |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<div> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
<el-table-column prop="displayLength" label="显示长度" align="center" /> |
|||
<el-table-column label="显示格式"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.displayformatType === 'center'">居中</span> |
|||
<span v-if="scope.row.displayformatType === 'left'">靠左</span> |
|||
<span v-if="scope.row.displayformatType === 'right'">靠右</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
<!-- @selection-change="selectionChangeHandler" --> |
|||
<el-table ref="table" :key="tableKey" v-loading="table.bottom.loading" :data="table.bottom.data" style="min-width: 100%;" height="300" class="nowrap-tab"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column v-for="field in table.right.data" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row[field.fieldName] }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { FetchInitArchivesView } from '@/api/archivesManage/archivesList' |
|||
import { add } from '@/api/category/listBrowsing' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'listBrowsing:add'], |
|||
edit: ['admin', 'listBrowsing:edit'], |
|||
del: ['admin', 'listBrowsing:delete'], |
|||
sort: ['admin', 'listBrowsing:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
tableKey: false, // 刷新下面预览表格用的:key |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
bottom: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
this.getDisplayFieldData() |
|||
this.getBottomTableData() |
|||
}, |
|||
getDisplayFieldData() { |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.sort((item1, item2) => { return item1.displayOrder - item2.displayOrder }).forEach((item) => { |
|||
if (item.isInput) { |
|||
if (item.isDisplay) { |
|||
this.table.right.data.push(item) |
|||
} else { |
|||
this.table.left.data.push(item) |
|||
} |
|||
} |
|||
}) |
|||
this.tableKey = !this.tableKey |
|||
}) |
|||
}, |
|||
getBottomTableData() { |
|||
FetchInitArchivesView({ categoryId: this.selectedCategory.id, isdel: false, page: 0, size: 10 }).then((res) => { |
|||
this.table.bottom.data.splice(0, this.table.bottom.data.length) |
|||
if (res && res.list) { |
|||
res.list.content.forEach((item) => { |
|||
this.table.bottom.data.push(item) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
const maxDisplayOrder = this.table.right.data.reduce((prev, cur) => { return { displayOrder: Math.max(prev.displayOrder, cur.displayOrder) } }, { displayOrder: 0 }).displayOrder + 1 |
|||
this.table.left.selections.forEach((item, index) => { |
|||
Vue.set(item, 'displayLength', 100) |
|||
Vue.set(item, 'displayformatType', 'center') |
|||
Vue.set(item, 'displayOrder', maxDisplayOrder + index) |
|||
item.isDisplay = true |
|||
}) |
|||
this.$refs.cuform.title = '新增列表显示列' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑列表显示列' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections.map((item) => { |
|||
item.isDisplay = false |
|||
item.displayformatType = null |
|||
item.displayLength = null |
|||
item.displayOrder = null |
|||
return item |
|||
}) |
|||
add(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.getDisplayFieldData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
// ::v-deep .nowrap-tab .el-table__header .cell { |
|||
// text-overflow: unset !important; |
|||
// white-space: nowrap !important; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="formData" :model="formData" size="small" label-width="95px"> |
|||
<el-row v-for="(item, index) in formData.fields" :key="item.id"> |
|||
<el-col :span="9"> |
|||
<el-form-item label="字段名称"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" style="width:160px;" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="9"> |
|||
<el-form-item label="列宽" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '列宽不能为空', trigger: 'blur'}" :model="item"> |
|||
<el-input v-model.number="item.displayLength" style="width:160px;" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="对齐方式" :prop="'fields.' + index + '.displayformatType'" :rules="{required: true, message: '对齐方式不能为空', trigger: 'change'}"> |
|||
<el-select v-model="item.displayformatType" style="width:80px;"> |
|||
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { add, edit } from '@/api/category/listBrowsing' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '新增列表显示列', |
|||
options: [ |
|||
{ |
|||
label: '居中', |
|||
value: 'center' |
|||
}, |
|||
{ |
|||
label: '靠左', |
|||
value: 'left' |
|||
}, |
|||
{ |
|||
label: '靠右', |
|||
value: 'right' |
|||
} |
|||
], |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.$refs['formData'].validate((valid) => { |
|||
if (valid) { |
|||
this.loading = true |
|||
if (this.title === '新增字段') { |
|||
add(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} else { |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} else { |
|||
return false |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="list-browsing-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/listBrowsing' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('list-browsing-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.displayOrder = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0 || orderFieldsSum >5" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
<span class="tip">注意：最多只可选择5个字段进行排序</span> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
<el-table-column label="排序方式" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.displayOrderBy === 'asc'">升序</span> |
|||
<span v-if="scope.row.displayOrderBy === 'desc'">降序</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getDisplayField } from '@/api/category/orderingRule' |
|||
import { edit } from '@/api/category/orderingRule' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'orderingRule:add'], |
|||
edit: ['admin', 'orderingRule:edit'], |
|||
del: ['admin', 'orderingRule:delete'], |
|||
sort: ['admin', 'orderingRule:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// 计算属性的 getter |
|||
orderFieldsSum: function() { |
|||
// `this` 指向 vm 实例 |
|||
return this.table.left.selections.length + this.table.right.data.length |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
created() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
getDisplayField({ categoryId: this.selectedCategory.id, isDisPlayState: 'true' }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.sort((item1, item2) => { return item1.queue - item2.queue }).forEach((item) => { |
|||
if (item.displayOrderBy) { |
|||
this.table.right.data.push(item) |
|||
} else { |
|||
this.table.left.data.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
const maxQueue = this.table.right.data.reduce((prev, cur) => { return { queue: Math.max(prev.queue, cur.queue) } }, { queue: 0 }).queue + 1 |
|||
this.table.left.selections.forEach((item, index) => { |
|||
Vue.set(item, 'displayOrderBy', 'asc') |
|||
Vue.set(item, 'queue', maxQueue + index) |
|||
}) |
|||
this.$refs.cuform.title = '新增浏览排序项' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑浏览排序项' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections.map((item) => { |
|||
item.displayOrderBy = null |
|||
item.queue = null |
|||
return item |
|||
}) |
|||
edit(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.initData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
::v-deep .el-table tr .el-table__cell { |
|||
height: 40px; |
|||
} |
|||
.tip { |
|||
display: inline-block; |
|||
margin: 4px 0 0 14px; |
|||
padding-left: 20px; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
line-height: 20px; |
|||
background: url('~@/assets/images/icon/tip-icon.png') no-repeat left center; |
|||
background-size: 14px 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<div class="fields-list"> |
|||
<el-form ref="form" :model="formData" size="small" label-width="100px"> |
|||
<el-row v-for="(item) in formData.fields" :key="item.id" :gutter="10"> |
|||
<el-col :span="13"> |
|||
<el-form-item label="组成字段"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="排序方式"> |
|||
<el-radio-group v-model="item.displayOrderBy"> |
|||
<el-radio label="asc">升序</el-radio> |
|||
<el-radio label="desc">降序</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { edit } from '@/api/category/orderingRule' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '', |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.loading = true |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.loading = false |
|||
this.cuDialogVisible = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fields-list { |
|||
max-height: calc(100vh - 312px); |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="ordering-rule-sort" style="width: 100%;;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/orderingRule' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('ordering-rule-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.queue = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" :close-on-click-modal="false" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" :tree-props="{children: 'childrens'}" class="category-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="cnName" label="门类名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { sort } from '@/api/category/category' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('category-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
const data = this.sortTableData.map((value, index) => { |
|||
return { id: value.id, sort: index + 1 } |
|||
}) |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.categorySeq = index + 1 |
|||
}) |
|||
sort(data).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('treeNodeSort', this.sortTableData) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="常用字段" :is-type="2" permission-str="commonFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'CommonFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="电子文件字段" :is-type="3" permission-str="electronicFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'ElectronicFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="app-container tab-container"> |
|||
<div class="tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<span class="right-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">常用字段<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">系统字段<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">电子文件字段<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
</ul> |
|||
<component :is="comName" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import commonFields from './commonFields/index.vue' |
|||
import systemFields from './systemFields/index.vue' |
|||
import electronicFields from './electronicFields/index.vue' |
|||
|
|||
export default { |
|||
name: 'SubjectLibraryField', |
|||
components: { |
|||
commonFields, |
|||
electronicFields, |
|||
systemFields |
|||
}, |
|||
data() { |
|||
return { |
|||
activeIndex: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 0) { |
|||
return 'commonFields' |
|||
} else if (this.activeIndex === 1) { |
|||
return 'systemFields' |
|||
} else if (this.activeIndex === 2) { |
|||
return 'electronicFields' |
|||
} |
|||
return 'commonFields' |
|||
} |
|||
}, |
|||
methods: { |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<field title="系统字段" :is-type="1" permission-str="systemFields" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Field from '@/views/components/field' |
|||
|
|||
export default { |
|||
name: 'SystemFields', |
|||
components: { Field } |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep thead .el-table-column--selection .cell { |
|||
display: none; |
|||
} |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,192 @@ |
|||
<template> |
|||
<div class="category-main"> |
|||
<div class="des-preview-left"> |
|||
<div class="des-title"> |
|||
<p>字段调整 输入字段</p> |
|||
</div> |
|||
<ul class="des-fields"> |
|||
<li v-for="(item,index) in allFieldsData" v-show="item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)"> |
|||
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> |
|||
<p>{{ item.fieldCnName }}</p> |
|||
</el-tooltip> |
|||
</li> |
|||
</ul> |
|||
<div class="des-title"> |
|||
<p @click="isCollaspeHiddenFields = !isCollaspeHiddenFields">非输入字段 <i :class="['el-icon-arrow-down', isCollaspeHiddenFields ?'el-icon-arrow-down':'arrow-up']" /></p> |
|||
</div> |
|||
<!-- 收起展开 --> |
|||
<el-collapse-transition> |
|||
<ul v-show="!isCollaspeHiddenFields" class="des-fields"> |
|||
<li v-for="(item,index) in allFieldsData" v-show="!item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)"> |
|||
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> |
|||
<p>{{ item.fieldCnName }}</p> |
|||
</el-tooltip> |
|||
</li> |
|||
</ul> |
|||
</el-collapse-transition> |
|||
<div class="des-set-btn"> |
|||
<el-button type="primary" icon="iconfont icon-bianji" @click="settingForm">编辑</el-button> |
|||
<el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu" @click="previewFormVisible = true">排序</el-button> |
|||
</div> |
|||
<SettingForm :is-disabled="true" :is-add="false" :this-fields="thisFields" /> |
|||
</div> |
|||
<div class="des-preview-right"> |
|||
<div class="des-title"> |
|||
<p>界面预览效果</p> |
|||
</div> |
|||
<PreviewForm ref="previewForm1" :is-has-code="true" :is-disabled="false" :form-preview-data.sync="isInputFields" :selected-category="selectedCategory" :is-des-form-type="isDesFormType" /> |
|||
</div> |
|||
|
|||
<!-- 修改字段 --> |
|||
<el-dialog class="edit-form-dialog" :visible="settingFormVisible" :before-close="handleClose" :close-on-click-modal="false" title="修改字段"> |
|||
<div class="setting-dialog"> |
|||
<SettingForm ref="editForm" :is-disabled="false" :is-add="false" :this-fields="editField" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" :loading="loading" @click="editSubmit">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 界面字段预览排序 --> |
|||
<el-dialog class="preview-dialog sort-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" title="著录界面排序"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<!-- <PreviewForm :is-disabled="true" :all-fields-data="allFieldsData" .sync/> --> |
|||
<PreviewForm ref="previewForm" :is-has-code="true" :is-disabled="false" :is-draggable="true" :form-preview-data="JSON.parse(JSON.stringify(isInputFields))" :is-des-form-type="isDesFormType" :selected-category="selectedCategory" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import PreviewForm from '@/views/components/category/PreviewForm' |
|||
import SettingForm from '@/views/components/category/SettingForm' |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { edit } from '@/api/category/fieldManage' |
|||
import { previewFormOrder } from '@/api/category/listBrowsing' |
|||
export default { |
|||
name: 'DescriptionPreview', |
|||
components: { PreviewForm, SettingForm }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
allFieldsData: [], |
|||
isCollaspeHiddenFields: true, // 隐藏字段收起展开 |
|||
settingFormVisible: false, // 修改编辑字段 - dialog |
|||
previewFormVisible: false, // 界面预览form - dialog |
|||
fieldsActive: 0, // 当前字段index |
|||
thisFields: { dictionaryConfigId: { dicName: null, id: null }}, // 当前项字段内容 |
|||
editField: {}, |
|||
isInputFields: [], |
|||
loading: false, |
|||
isDesFormType: 'category' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.getArchivesType() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getArchivesType() |
|||
}, |
|||
methods: { |
|||
getArchivesType(setField) { |
|||
// 门类切换时，表单校验清除 |
|||
this.$refs.previewForm1.$refs['addOrUpdateForm'].clearValidate() |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then(res => { |
|||
this.allFieldsData.splice(0, this.allFieldsData.length) |
|||
this.isInputFields.splice(0, this.isInputFields.length) |
|||
if (!setField) { |
|||
setField = false |
|||
} |
|||
res.sort(this.compare).forEach((item, index) => { |
|||
// 防止对应字典是null时报错 |
|||
item.dictionaryConfigId = item.dictionaryConfigId || { dicName: null, id: null } |
|||
this.allFieldsData.push(item) |
|||
if (item.isInput && !setField) { |
|||
this.fieldsActive = index |
|||
this.thisFields = item |
|||
setField = true |
|||
} |
|||
if (item.isInput) { |
|||
this.isInputFields.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
handleClose(done) { |
|||
this.settingFormVisible = false |
|||
this.previewFormVisible = false |
|||
// this.editResetForm() |
|||
done() |
|||
}, |
|||
compare(a, b) { |
|||
return a.isSequence - b.isSequence |
|||
}, |
|||
settingForm() { |
|||
this.editField = JSON.parse(JSON.stringify(this.thisFields)) |
|||
this.settingFormVisible = true |
|||
}, |
|||
// 当前选中的字段 |
|||
selectField(index) { |
|||
this.hiddenFieldsActive = -1 |
|||
this.fieldsActive = index |
|||
this.thisFields = this.allFieldsData[this.fieldsActive] |
|||
}, |
|||
// 修改字段"保存"提交 |
|||
editSubmit() { |
|||
this.$refs['editForm'].$refs['form'].validate(valid => { |
|||
if (!valid) { |
|||
return |
|||
} |
|||
this.loading = true |
|||
edit(this.editField).then(() => { |
|||
this.loading = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.settingFormVisible = false |
|||
// 清空数组数据 |
|||
this.allFieldsData.splice(0, this.allFieldsData.length) |
|||
this.getArchivesType(true) |
|||
this.thisFields = this.editField |
|||
}) |
|||
}) |
|||
return false |
|||
}, |
|||
handleSort() { |
|||
const sortParam = this.$refs.previewForm.formPreviewData.map((item, index) => { |
|||
return { |
|||
isSequence: index + 1, |
|||
id: item.id |
|||
} |
|||
}) |
|||
previewFormOrder(sortParam).then(() => { |
|||
this.previewFormVisible = false |
|||
this.getArchivesType() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.category-main { |
|||
.des-preview-left, |
|||
.des-preview-right { |
|||
height: calc(100vh - 254px); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div> |
|||
<div class="head-container"> |
|||
<crudOperation :permission="permission" crud-tag="field"> |
|||
<template v-slot:right> |
|||
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button> |
|||
<el-button size="mini" @click="toQuick"><i class="iconfont icon-kuaisushezhi" />快速设置</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 286px)" crud-tag="field" @selection-change="selectionChangeHandler" @row-click="clickRowHandler"> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column type="index" label="序号" width="55" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" min-width="145" show-overflow-tooltip /> |
|||
<el-table-column prop="fieldName" label="字段标识" min-width="145" show-overflow-tooltip /> |
|||
<el-table-column label="数据类型" min-width="85"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.isDataType === 1">字符</span> |
|||
<span v-if="scope.row.isDataType === 2">数字</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isColumnLength" label="字段长度" min-width="85" /> |
|||
<el-table-column label="著录形式" min-width="85"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.isInputClass === 'select'">下拉框</span> |
|||
<span v-if="scope.row.isInputClass === 'text'">文本框</span> |
|||
<span v-if="scope.row.isInputClass === 'date'">日期框</span> |
|||
<span v-if="scope.row.isInputClass === 'number'">数字框</span> |
|||
<span v-if="scope.row.isInputClass === 'popover'">弹出框</span> |
|||
<span v-if="scope.row.isInputClass === 'textarea'">文本域</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dictionaryConfigId.dicName" label="对应字典" min-width="85" show-overflow-tooltip /> |
|||
<el-table-column prop="editLength" label="显示长度" min-width="85" /> |
|||
<el-table-column label="显示一整行" min-width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isLine" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="输入字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isInput" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="必填字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRequired" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="自动生成" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isAuto" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="自动补零" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isFilling" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="fillingDigit" label="位数" min-width="55" align="center" :formatter="digitFormatter" /> |
|||
<el-table-column label="值不重复" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRepeat" :disabled="true" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm crud-tag="field" /> |
|||
<quickSetting ref="quick" /> |
|||
<el-dialog title="删除字段" :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="handleConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import fieldCrudMethod from '@/api/category/fieldManage' |
|||
import eForm from './module/form' |
|||
import quickSetting from './module/quickSetting' |
|||
import CRUD, { presenter } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
|
|||
export default { |
|||
components: { eForm, quickSetting, crudOperation }, |
|||
mixins: [ |
|||
presenter() |
|||
], |
|||
cruds() { |
|||
return CRUD({ |
|||
tag: 'field', |
|||
url: 'api/arc-dic/manage', |
|||
crudMethod: fieldCrudMethod, |
|||
title: '字段', |
|||
optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
download: false, |
|||
group: false |
|||
} |
|||
}) |
|||
}, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'fieldManage:add'], |
|||
edit: ['admin', 'fieldManage:edit'], |
|||
del: ['admin', 'fieldManage:edit'] |
|||
}, |
|||
deleteVisible: false, |
|||
deleteData: {}, |
|||
delLoading: false |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.crud.refresh() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取数据前设置默认参数 |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.crud.query.categoryId = this.selectedCategory.id |
|||
this.crud.query.isType = 2 |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
crud.data.forEach(function(item, index) { |
|||
item.dictionaryConfigId = item.dictionaryConfigId || { id: null } |
|||
}) |
|||
}, |
|||
[CRUD.HOOK.beforeValidateCU](crud) { |
|||
// 页面重复添加信息时，下拉框的校验会存在，需要手工取消 |
|||
crud.findVM('form').$refs['editForm'].$refs['form'].validate(valid => { |
|||
if (!valid) { |
|||
return |
|||
} |
|||
if (crud.status.add === CRUD.STATUS.PREPARED) { |
|||
crud.doAdd() |
|||
} else if (crud.status.edit === CRUD.STATUS.PREPARED) { |
|||
crud.doEdit() |
|||
} |
|||
}) |
|||
return false |
|||
}, |
|||
[CRUD.HOOK.beforeSubmit]() { |
|||
if (this.crud.status.add > CRUD.STATUS.NORMAL) { |
|||
this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1 |
|||
} |
|||
}, |
|||
[CRUD.HOOK.beforeToCU]() { |
|||
if (this.crud.findVM('form').$refs['editForm']) { |
|||
this.crud.findVM('form').$refs['editForm'].$refs['form'].clearValidate() |
|||
} |
|||
}, |
|||
clickRowHandler(row) { |
|||
this.$refs.fieldTable.clearSelection() |
|||
this.$refs.fieldTable.toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val) { |
|||
if (val.length > 1) { |
|||
// 取出最后val的最后一个返回出来 |
|||
const finalVal = val.pop() |
|||
// 清除所有选中 |
|||
this.$refs.fieldTable.clearSelection() |
|||
// 给最后一个加上选中 |
|||
this.$refs.fieldTable.toggleRowSelection(finalVal) |
|||
this.crud.selectionChangeHandler([finalVal]) |
|||
} else { |
|||
this.crud.selectionChangeHandler(val) |
|||
} |
|||
}, |
|||
toDelete(data) { |
|||
if (data[0].isSystem) { |
|||
this.$message({ |
|||
message: '系统字段不可删除', |
|||
type: 'warning', |
|||
duration: 2500 |
|||
}) |
|||
return |
|||
} |
|||
this.deleteData = data |
|||
this.deleteVisible = true |
|||
}, |
|||
handleConfirm() { |
|||
this.deleteVisible = false |
|||
this.crud.delAllLoading = true |
|||
this.crud.doDelete(this.deleteData) |
|||
}, |
|||
handleClose(done) { |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
digitFormatter(row, column, cellValue) { |
|||
return cellValue || '-' |
|||
}, |
|||
toQuick() { |
|||
this.$refs.quick.quickTableData = JSON.parse(JSON.stringify(this.crud.data)) |
|||
this.$refs.quick.quickVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// ::v-deep thead .el-table-column--selection .cell { |
|||
// display: none; |
|||
// } |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<el-dialog class="field-setting-dialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<SettingForm ref="editForm" :is-disabled="false" :is-add="crud.status.add === 1" :this-fields="form" /> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="crud.cancelCU"> |
|||
取消 |
|||
</el-button> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import SettingForm from '@/views/components/category/SettingForm' |
|||
|
|||
const defaultForm = { |
|||
id: null, |
|||
fieldName: null, |
|||
fieldCnName: null, |
|||
isDefaultValue: null, |
|||
isInputClass: 'text', |
|||
isDataType: null, |
|||
isDataTypeDetails: null, |
|||
isColumnLength: null, |
|||
isColumnType: 1, |
|||
isSequence: null, |
|||
isType: 2, |
|||
isSystem: true, |
|||
isLine: false, |
|||
isInput: true, |
|||
isRequired: false, |
|||
isAutomatic: false, |
|||
isAdd: null, |
|||
isSearch: null, |
|||
isInherit: null, |
|||
isFilling: false, |
|||
fillingDigit: null, |
|||
isRepeat: null, |
|||
isDisplay: false, |
|||
displayOrder: null, |
|||
isDisplayformat: null, |
|||
displayformatType: null, |
|||
editLength: 196, |
|||
displayLength: null, |
|||
dictionaryConfigId: { |
|||
id: null |
|||
} |
|||
} |
|||
export default { |
|||
components: { SettingForm }, |
|||
mixins: [ |
|||
form(function() { |
|||
return Object.assign({ categoryId: this.$parent.selectedCategory.id }, defaultForm) |
|||
}) |
|||
], |
|||
data() { |
|||
return { |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog title="快速设置" :visible.sync="quickVisible"> |
|||
<div class="setting-dialog"> |
|||
<el-table :data="quickTableData" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
<el-table-column prop="fieldName" label="字段标识" /> |
|||
<el-table-column label="输入字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isInput" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="必填字段" min-width="85" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.isRequired" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="quickVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
quickVisible: false, |
|||
quickTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
handleSort() { |
|||
this.quickTableData.forEach((item, index) => { |
|||
item.sequence = index + 1 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog .el-dialog__body{ |
|||
padding-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 286px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="组成字段" align="center" /> |
|||
<el-table-column prop="connector" label="组成符号" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
</div> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { getNoFormatField, del } from '@/api/category/fileNoFormat' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'fileNoFormat:add'], |
|||
edit: ['admin', 'fileNoFormat:edit'], |
|||
del: ['admin', 'fileNoFormat:delete'], |
|||
sort: ['admin', 'fileNoFormat:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
created() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => { |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.forEach((item) => { |
|||
if (!item.isDisplayformat && item.isInput && !item.isAutomatic) { |
|||
this.table.left.data.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
res.forEach((item) => { |
|||
this.table.right.data.push(item) |
|||
}) |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
this.table.left.selections.forEach((item) => { |
|||
Vue.set(item, 'connector', '-') |
|||
Vue.set(item, 'categoryId', this.selectedCategory.id) |
|||
}) |
|||
this.$refs.cuform.title = '新增档号规则' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑档号规则' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections |
|||
del(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.initData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="formData" :model="formData" size="small" label-width="90px"> |
|||
<el-row v-for="(item) in formData.fields" :key="item.id"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="组成字段"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="组成符号"> |
|||
<el-input v-model="item.connector" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { add, edit } from '@/api/category/fileNoFormat' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '新增档号规则', |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.loading = true |
|||
if (this.title === '新增档号规则') { |
|||
const addData = this.formData.fields.map((item) => { |
|||
return { |
|||
dictionaryId: item.id, |
|||
fieldName: item.fieldName, |
|||
fieldCnName: item.fieldCnName, |
|||
connector: item.connector, |
|||
categoryId: item.categoryId |
|||
} |
|||
}) |
|||
add(addData).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} else { |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.fields-list { |
|||
max-height: calc(100vh - 312px); |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="fileno-format-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/fileNoFormat' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('fileno-format-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.sequence = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div class="app-container tab-container"> |
|||
<div class="tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<span class="right-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">字段管理<i /></li> |
|||
<li :class="{'active-tab-nav': activeIndex == 2}" @click="changeActiveTab(2)">著录界面设置<i /></li> |
|||
<li :class="{'active-tab-nav': activeIndex == 3}" @click="changeActiveTab(3)">列表界面设置<i /></li> |
|||
<li :class="{'active-tab-nav': activeIndex == 4}" @click="changeActiveTab(4)">排序规则设置<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
</ul> |
|||
<component :is="comName" :selected-category="selectedCategory" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CRUD, { presenter, header } from '@crud/crud' |
|||
import fieldManage from './fieldManage/index' |
|||
import descriptionPreview from './descriptionPreview/index' |
|||
import listBrowsing from './listBrowsing/index' |
|||
import orderingRule from './orderingRule/index' |
|||
|
|||
export default { |
|||
name: 'SubjectLibraryManage', |
|||
components: { fieldManage, descriptionPreview, listBrowsing, orderingRule }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '分类', url: 'api/archives-type/menu' |
|||
}) |
|||
] |
|||
}, |
|||
mixins: [presenter(), header()], |
|||
data() { |
|||
return { |
|||
activeIndex: 1, |
|||
selectedCategory: { |
|||
'id': 'DA92B36D1AE9BC95FC6B26', |
|||
'cnName': '文书档案（卷内）', |
|||
'enName': 'tb_2022_08_23_1661222926063', |
|||
'pid': '699CD61A5E0320DB77600E', |
|||
'isType': 4, |
|||
'categorySeq': null, |
|||
'children': [], |
|||
'remark': null, |
|||
'typeMetic': true, |
|||
'create_by': 'admin', |
|||
'update_by': 'admin', |
|||
'create_time': 1661222927000, |
|||
'update_time': 1661222927000, |
|||
'parentName': '文书档案（案卷）' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 1) { |
|||
return 'fieldManage' |
|||
} else if (this.activeIndex === 2) { |
|||
return 'descriptionPreview' |
|||
} else if (this.activeIndex === 3) { |
|||
return 'listBrowsing' |
|||
} else if (this.activeIndex === 4) { |
|||
return 'orderingRule' |
|||
} |
|||
return 'fieldManage' |
|||
} |
|||
}, |
|||
methods: { |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<div> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" height="calc(100vh - 586px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
<el-table-column prop="displayLength" label="显示长度" align="center" /> |
|||
<el-table-column label="显示格式"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.displayformatType === 'center'">居中</span> |
|||
<span v-if="scope.row.displayformatType === 'left'">靠左</span> |
|||
<span v-if="scope.row.displayformatType === 'right'">靠右</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
<!-- @selection-change="selectionChangeHandler" --> |
|||
<el-table ref="table" :key="tableKey" v-loading="table.bottom.loading" :data="table.bottom.data" style="min-width: 100%;" height="300" class="nowrap-tab"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column v-for="field in table.right.data" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row[field.fieldName] }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { FetchArchivesTypeManage } from '@/api/category/category' |
|||
import { FetchInitArchivesView } from '@/api/archivesManage/archivesList' |
|||
import { add } from '@/api/category/listBrowsing' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'listBrowsing:add'], |
|||
edit: ['admin', 'listBrowsing:edit'], |
|||
del: ['admin', 'listBrowsing:delete'], |
|||
sort: ['admin', 'listBrowsing:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
tableKey: false, // 刷新下面预览表格用的:key |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
bottom: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
this.getDisplayFieldData() |
|||
this.getBottomTableData() |
|||
}, |
|||
getDisplayFieldData() { |
|||
FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.sort((item1, item2) => { return item1.displayOrder - item2.displayOrder }).forEach((item) => { |
|||
if (item.isInput) { |
|||
if (item.isDisplay) { |
|||
this.table.right.data.push(item) |
|||
} else { |
|||
this.table.left.data.push(item) |
|||
} |
|||
} |
|||
}) |
|||
this.tableKey = !this.tableKey |
|||
}) |
|||
}, |
|||
getBottomTableData() { |
|||
FetchInitArchivesView({ categoryId: this.selectedCategory.id, isdel: false, page: 0, size: 10 }).then((res) => { |
|||
this.table.bottom.data.splice(0, this.table.bottom.data.length) |
|||
if (res && res.list) { |
|||
res.list.content.forEach((item) => { |
|||
this.table.bottom.data.push(item) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
const maxDisplayOrder = this.table.right.data.reduce((prev, cur) => { return { displayOrder: Math.max(prev.displayOrder, cur.displayOrder) } }, { displayOrder: 0 }).displayOrder + 1 |
|||
this.table.left.selections.forEach((item, index) => { |
|||
Vue.set(item, 'displayLength', 100) |
|||
Vue.set(item, 'displayformatType', 'center') |
|||
Vue.set(item, 'displayOrder', maxDisplayOrder + index) |
|||
item.isDisplay = true |
|||
}) |
|||
this.$refs.cuform.title = '新增列表显示列' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑列表显示列' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections.map((item) => { |
|||
item.isDisplay = false |
|||
item.displayformatType = null |
|||
item.displayLength = null |
|||
item.displayOrder = null |
|||
return item |
|||
}) |
|||
add(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.getDisplayFieldData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// ::v-deep div.el-dialog__footer { |
|||
// text-align: center; |
|||
// } |
|||
// ::v-deep .el-table tr .el-table__cell { |
|||
// height: 40px; |
|||
// } |
|||
// ::v-deep .nowrap-tab .el-table__header .cell { |
|||
// text-overflow: unset !important; |
|||
// white-space: nowrap !important; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="formData" :model="formData" size="small" label-width="95px"> |
|||
<el-row v-for="(item, index) in formData.fields" :key="item.id"> |
|||
<el-col :span="9"> |
|||
<el-form-item label="字段名称"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" style="width:160px;" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="9"> |
|||
<el-form-item label="列宽" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '列宽不能为空', trigger: 'blur'}" :model="item"> |
|||
<el-input v-model.number="item.displayLength" style="width:160px;" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="对齐方式" :prop="'fields.' + index + '.displayformatType'" :rules="{required: true, message: '对齐方式不能为空', trigger: 'change'}"> |
|||
<el-select v-model="item.displayformatType" style="width:80px;"> |
|||
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { add, edit } from '@/api/category/listBrowsing' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '新增列表显示列', |
|||
options: [ |
|||
{ |
|||
label: '居中', |
|||
value: 'center' |
|||
}, |
|||
{ |
|||
label: '靠左', |
|||
value: 'left' |
|||
}, |
|||
{ |
|||
label: '靠右', |
|||
value: 'right' |
|||
} |
|||
], |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.$refs['formData'].validate((valid) => { |
|||
if (valid) { |
|||
this.loading = true |
|||
if (this.title === '新增字段') { |
|||
add(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} else { |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.cuDialogVisible = false |
|||
this.loading = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} else { |
|||
return false |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="list-browsing-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/listBrowsing' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('list-browsing-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.displayOrder = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div class="format-main"> |
|||
<div class="format-main-left"> |
|||
<div class="head-container"> |
|||
<el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0 || orderFieldsSum >5" @click="toAdd(table.left.selections)"> |
|||
插入 |
|||
</el-button> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 286px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
</el-table> |
|||
<!--表单渲染--> |
|||
<eForm /> |
|||
</div> |
|||
<div class="format-main-right"> |
|||
<div class="head-container"> |
|||
<!-- type="danger" --> |
|||
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)"> |
|||
移除 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)"> |
|||
编辑 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button> |
|||
<span class="tip">注意：最多只可选择5个字段进行排序</span> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column type="index" label="序号" width="55" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" align="center" /> |
|||
<el-table-column label="排序方式" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.displayOrderBy === 'asc'">升序</span> |
|||
<span v-if="scope.row.displayOrderBy === 'desc'">降序</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<eForm ref="cuform" @refresh="initData" /> |
|||
<!--排序对话框组件--> |
|||
<sortDialog ref="sort" @refresh="initData" /> |
|||
<!--删除对话框组件--> |
|||
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible"> |
|||
<div class="setting-dialog"> |
|||
<div class="tip-content"> |
|||
<p class="tipMsg">此操作将移除当前所选字段</p> |
|||
<span>你是否还要继续?</span> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleDelConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getDisplayField } from '@/api/category/orderingRule' |
|||
import { edit } from '@/api/category/orderingRule' |
|||
import eForm from './module/form' |
|||
import sortDialog from './module/sortDialog' |
|||
import Vue from 'vue' |
|||
|
|||
export default { |
|||
components: { eForm, sortDialog }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'orderingRule:add'], |
|||
edit: ['admin', 'orderingRule:edit'], |
|||
del: ['admin', 'orderingRule:delete'], |
|||
sort: ['admin', 'orderingRule:sort'] |
|||
}, |
|||
deleteVisible: false, |
|||
sortLoading: false, |
|||
delAllLoading: false, |
|||
table: { |
|||
left: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
}, |
|||
right: { |
|||
data: [], |
|||
Loading: false, |
|||
selections: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// 计算属性的 getter |
|||
orderFieldsSum: function() { |
|||
// `this` 指向 vm 实例 |
|||
return this.table.left.selections.length + this.table.right.data.length |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
this.initData() |
|||
} |
|||
}, |
|||
created() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
getDisplayField({ categoryId: this.selectedCategory.id, isDisPlayState: 'true' }).then((res) => { |
|||
this.table.right.data.splice(0, this.table.right.data.length) |
|||
this.table.left.data.splice(0, this.table.left.data.length) |
|||
res.sort((item1, item2) => { return item1.queue - item2.queue }).forEach((item) => { |
|||
if (item.displayOrderBy) { |
|||
this.table.right.data.push(item) |
|||
} else { |
|||
this.table.left.data.push(item) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
clickRowHandler(row, column, e, tableName) { |
|||
this.$refs[tableName].toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val, tableName) { |
|||
this.table[tableName].selections = val |
|||
}, |
|||
toAdd() { |
|||
const maxQueue = this.table.right.data.reduce((prev, cur) => { return { queue: Math.max(prev.queue, cur.queue) } }, { queue: 0 }).queue + 1 |
|||
this.table.left.selections.forEach((item, index) => { |
|||
Vue.set(item, 'displayOrderBy', 'asc') |
|||
Vue.set(item, 'queue', maxQueue + index) |
|||
}) |
|||
this.$refs.cuform.title = '新增浏览排序项' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toEdit() { |
|||
this.$refs.cuform.title = '编辑浏览排序项' |
|||
Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections))) |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
}, |
|||
toDelete() { |
|||
this.deleteVisible = true |
|||
}, |
|||
handleDelConfirm() { |
|||
this.deleteVisible = false |
|||
this.delAllLoading = true |
|||
const deleteData = this.table.right.selections.map((item) => { |
|||
item.displayOrderBy = null |
|||
item.queue = null |
|||
return item |
|||
}) |
|||
edit(deleteData).then((res) => { |
|||
this.delAllLoading = false |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.initData() |
|||
}) |
|||
}, |
|||
toSort() { |
|||
this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data)) |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep div.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
::v-deep .el-table tr .el-table__cell { |
|||
height: 40px; |
|||
} |
|||
.tip { |
|||
display: inline-block; |
|||
margin: 4px 0 0 14px; |
|||
padding-left: 20px; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
line-height: 20px; |
|||
background: url('~@/assets/images/icon/tip-icon.png') no-repeat left center; |
|||
background-size: 14px 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<div class="fields-list"> |
|||
<el-form ref="form" :model="formData" size="small" label-width="100px"> |
|||
<el-row v-for="(item) in formData.fields" :key="item.id" :gutter="10"> |
|||
<el-col :span="13"> |
|||
<el-form-item label="组成字段"> |
|||
<el-input v-model="item.fieldCnName" :disabled="true" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="排序方式"> |
|||
<el-radio-group v-model="item.displayOrderBy"> |
|||
<el-radio label="asc">升序</el-radio> |
|||
<el-radio label="desc">降序</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="cuDialogVisible=false">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { edit } from '@/api/category/orderingRule' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
formData: {}, |
|||
title: '', |
|||
loading: false |
|||
} |
|||
}, |
|||
methods: { |
|||
save() { |
|||
this.loading = true |
|||
edit(this.formData.fields).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.loading = false |
|||
this.cuDialogVisible = false |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fields-list { |
|||
max-height: calc(100vh - 312px); |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened"> |
|||
<div class="setting-dialog"> |
|||
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
|||
<el-table :data="sortTableData" class="ordering-rule-sort" style="width: 100%;;" :max-height="tableHeight" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="fieldCnName" label="字段名称" /> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="sortVisible=false">取消</el-button> |
|||
<el-button type="primary" @click.native="handleSort">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Sortable from 'sortablejs' |
|||
import { order } from '@/api/category/orderingRule' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
sortVisible: false, |
|||
sortTableData: [], |
|||
tableHeight: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight * 0.6 |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 行拖拽 |
|||
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('ordering-rule-sort', 'sortTableData') |
|||
}, |
|||
handleSort() { |
|||
this.sortTableData.forEach((item, index) => { |
|||
item.queue = index + 1 |
|||
}) |
|||
order(this.sortTableData).then(() => { |
|||
this.sortVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success', |
|||
duration: 2500 |
|||
}) |
|||
this.$emit('refresh') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue