4 changed files with 213 additions and 128 deletions
-
13src/api/archivesConfig/dictDetail.js
-
125src/views/category/form.vue
-
148src/views/category/index.vue
-
55src/views/category/sortDialog.vue
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
|
<el-form-item label="门类名称" prop="dicName"> |
||||
|
<el-input v-model="form.dicName" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="门类类型" prop="dicCode"> |
||||
|
<el-select v-model="form.dicCode" style="width: 370px;" @change="changeType"> |
||||
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择模板" prop="dicExplain"> |
||||
|
<treeselect v-model="form.dicExplain" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.dicCode !== '6'" :normalizer="normalizer" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="内容说明"> |
||||
|
<el-input v-model="form.dicExplain" style="width: 370px;" type="textarea" :rows="4" /> |
||||
|
</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> |
||||
|
import crudDict from '@/api/archivesConfig/dict' |
||||
|
import { form } from '@crud/crud' |
||||
|
import Treeselect from '@riophae/vue-treeselect' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
|
||||
|
const defaultForm = { id: null, dicName: null, dicCode: '1', dicExplain: null, dicType: true } |
||||
|
export default { |
||||
|
components: { Treeselect }, |
||||
|
mixins: [form(defaultForm)], |
||||
|
data() { |
||||
|
return { |
||||
|
rules: { |
||||
|
dicName: [ |
||||
|
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
selectOptions: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '文件夹' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '项目' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '案卷' |
||||
|
}, |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '卷内' |
||||
|
}, |
||||
|
{ |
||||
|
value: '5', |
||||
|
label: '文件' |
||||
|
}, |
||||
|
{ |
||||
|
value: '6', |
||||
|
label: '选择模板' |
||||
|
} |
||||
|
], |
||||
|
templateTree: [ |
||||
|
{ |
||||
|
id: 'a', |
||||
|
label: 'a', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: 'aa', |
||||
|
label: 'aa' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ab', |
||||
|
label: 'ab' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 'b', |
||||
|
label: 'b' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'c', |
||||
|
label: 'c' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeType() { |
||||
|
if (this.form.dicCode === '6') { |
||||
|
// this.crudDict.getDicts() |
||||
|
this.getTemplateTree() |
||||
|
} |
||||
|
}, |
||||
|
getTemplateTree() { |
||||
|
crudDict.getDicts().then(res => { |
||||
|
this.templateTree = res |
||||
|
}) |
||||
|
}, |
||||
|
normalizer(node) { |
||||
|
return { |
||||
|
id: node.id, |
||||
|
label: node.dicName, |
||||
|
children: node.childMenus |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog title="排序" :visible.sync="sortVisible" @open="open"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-table :data="sortTableData" class="sort" style="width: 100%;max-height: 70vh;" row-key="id"> |
||||
|
<el-table-column type="index" label="序号" width="100" /> |
||||
|
<el-table-column prop="dicName" label="门类名称" /> |
||||
|
</el-table> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleSort">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Sortable from 'sortablejs' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
sortVisible: false, |
||||
|
sortTableData: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 行拖拽 |
||||
|
rowDrop(className, targetName) { |
||||
|
// 此时找到的元素是要拖拽元素的父容器 |
||||
|
console.log(1) |
||||
|
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]) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
open() { |
||||
|
this.rowDrop('sort', 'sortTableData') |
||||
|
}, |
||||
|
handleSort() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue