8 changed files with 26 additions and 359 deletions
-
6src/assets/styles/yxk-admin.scss
-
18src/views/system/subjectLibraryManage/descriptionPreview/index.vue
-
11src/views/system/subjectLibraryManage/fieldManage/index.vue
-
176src/views/system/subjectLibraryManage/fileNoFormat/index.vue
-
84src/views/system/subjectLibraryManage/fileNoFormat/module/form.vue
-
72src/views/system/subjectLibraryManage/fileNoFormat/module/sortDialog.vue
-
12src/views/system/subjectLibraryManage/listBrowsing/index.vue
-
6src/views/system/subjectLibraryManage/orderingRule/index.vue
@ -1,176 +0,0 @@ |
|||
<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> |
@ -1,84 +0,0 @@ |
|||
<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> |
@ -1,72 +0,0 @@ |
|||
<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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue