3 changed files with 420 additions and 260 deletions
-
2src/assets/styles/yxk-admin.scss
-
308src/views/system/archivesClassify/index.vue
-
370src/views/system/archivesClassify/module/tableList.vue
@ -0,0 +1,370 @@ |
|||||
|
<template> |
||||
|
<!--用户数据--> |
||||
|
<div class="elect-cont-right"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" @click="crud.toAdd"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button v-permission="permission.edit" size="mini" :disabled="selections.length !== 1" @click="crud.toEdit(selections[0])"> |
||||
|
<i class="iconfont icon-bianji" /> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-slot:right> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" :disabled="selections.length === 0" @click="doExport(selections)"> |
||||
|
<i class="iconfont icon-daochu" /> |
||||
|
导出 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
append-to-body |
||||
|
:before-close="crud.cancelCU" |
||||
|
:visible.sync="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-form-item v-if="crud.status.add === 1" label="所属门类" prop="categoryId"> |
||||
|
<treeselect |
||||
|
v-model="form.categoryId" |
||||
|
:load-options="loadCategorys" |
||||
|
:options="categoryDatas" |
||||
|
placeholder="选择所属门类" |
||||
|
flat |
||||
|
:multiple="false" |
||||
|
:normalizer="normalizer" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="crud.status.edit === 1" label="所属门类" prop="categoryId"> |
||||
|
<el-input v-model="form.categoryName" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分类编码" prop="code"> |
||||
|
<el-input v-model="form.code" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分类名称" prop="name"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="classSeq"> |
||||
|
<el-input-number |
||||
|
v-model.number="form.classSeq" |
||||
|
:min="0" |
||||
|
:max="999" |
||||
|
controls-position="right" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="顶级分类" prop="isTop"> |
||||
|
<el-radio-group v-model="form.isTop" @input="changeIsTop"> |
||||
|
<el-radio label="1">是</el-radio> |
||||
|
<el-radio label="0">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="form.isTop === '0'" |
||||
|
label="上级分类" |
||||
|
prop="pid" |
||||
|
> |
||||
|
<treeselect |
||||
|
v-model="form.pid" |
||||
|
:load-options="loadCategory" |
||||
|
:options="depts" |
||||
|
placeholder="选择上级类目" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item label="描述信息" prop="remark"> |
||||
|
<el-input v-model="form.remark" rows="5" type="textarea" style="width: 586px;" /> |
||||
|
</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> |
||||
|
<!--表格渲染--> |
||||
|
<div class="container-right"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" --> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
lazy |
||||
|
:data="crud.data" |
||||
|
row-key="id" |
||||
|
:tree-props="{ children: 'childMenus', hasChildren: 'hasChildren' }" |
||||
|
highlight-current-row |
||||
|
@select-all="selectAll" |
||||
|
@select="selectTr" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column label="分类名称" prop="name" /> |
||||
|
<el-table-column label="分类编号" prop="code" /> |
||||
|
<el-table-column label="排序" prop="classSeq" /> |
||||
|
<el-table-column label="所属门类" prop="categoryName" /> |
||||
|
<el-table-column prop="createTime" label="创建日期"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length!==0" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchCategoryMenu } from '@/api/system/category/category' |
||||
|
import crudClassify from '@/api/system/archivesClass' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import Treeselect from '@riophae/vue-treeselect' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
||||
|
import { exportFile } from '@/utils/index' |
||||
|
import qs from 'qs' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
const defaultForm = { |
||||
|
id: null, |
||||
|
categoryId: null, |
||||
|
name: null, |
||||
|
code: null, |
||||
|
isTop: '1', |
||||
|
classSeq: 999, |
||||
|
pid: null, |
||||
|
remark: null |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'Classify', |
||||
|
components: { crudOperation, pagination, Treeselect }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '分类', url: 'api/archivesClass/initArchivesClass', crudMethod: { ...crudClassify }, optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
reset: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
}}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
props: { |
||||
|
selectedCategory: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
categoryDatas: [], |
||||
|
selections: [], |
||||
|
isAllSelect: false, |
||||
|
rules: { |
||||
|
categoryId: [{ required: true, message: '请选择所属门类', trigger: 'change' }], |
||||
|
code: [{ required: true, message: '分类编码不可为空', trigger: 'blur' }], |
||||
|
name: [{ required: true, message: '分类名称不可为空', trigger: 'blur' }], |
||||
|
classSeq: [{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }], |
||||
|
isTop: [{ required: true, message: '请选择是否为顶级分类', trigger: 'change' }], |
||||
|
pid: [{ required: true, message: '请选择上级分类', trigger: 'change' }] |
||||
|
}, |
||||
|
permission: { |
||||
|
add: ['admin', 'classify:add'], |
||||
|
edit: ['admin', 'classify:edit'], |
||||
|
del: ['admin', 'classify:del'] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
watch: { |
||||
|
selectedCategory: function(newValue, oldValue) { |
||||
|
this.crud.refresh() |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据前设置默认参数 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.categoryId = this.selectedCategory.id |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
}, |
||||
|
// 新增 |
||||
|
[CRUD.HOOK.beforeToAdd](crud, form) { |
||||
|
}, |
||||
|
// 新增/编辑后 |
||||
|
[CRUD.HOOK.afterSubmit]() { |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
console.log(crud.form) |
||||
|
delete crud.form.isTop |
||||
|
return true |
||||
|
}, |
||||
|
changeIsTop(val) { |
||||
|
if (this.crud.status.edit) { |
||||
|
if (val === '0') { |
||||
|
// const params = { |
||||
|
// 'fondsId': this.form.fondsId, |
||||
|
// 'fondsName': this.form.fondsName, |
||||
|
// 'status': 1 |
||||
|
// } |
||||
|
// this.getDepts(params) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 新增与编辑前做的操作 |
||||
|
[CRUD.HOOK.afterToCU](crud, form) { |
||||
|
this.getCategoryDataTree() |
||||
|
if (form.id != null) { |
||||
|
if (form.pid === null) { |
||||
|
form.isTop = '1' |
||||
|
} else { |
||||
|
form.isTop = '0' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
filterData(data) { |
||||
|
return data.filter(node => { |
||||
|
if (node.children && node.children.length > 0) { |
||||
|
node.children = this.filterData(node.children) // 递归处理子节点 |
||||
|
} |
||||
|
return node.isType !== 3 // 过滤掉isType为3的节点 |
||||
|
}) |
||||
|
}, |
||||
|
getCategoryDataTree() { |
||||
|
FetchCategoryMenu().then(res => { |
||||
|
this.categoryDatas = this.filterData(res) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取弹窗内门类数据 |
||||
|
loadCategorys({ action, parentNode, callback }) { |
||||
|
if (action === LOAD_CHILDREN_OPTIONS) { |
||||
|
FetchCategoryMenu().then(res => { |
||||
|
parentNode.children = res.map(function(obj) { |
||||
|
if (obj.children) { |
||||
|
obj.childMenus = null |
||||
|
} |
||||
|
return obj |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
callback() |
||||
|
}, 100) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
selectAll() { |
||||
|
this.isAllSelect = !this.isAllSelect |
||||
|
const data = this.crud.data |
||||
|
this.toggleSelect(data, this.isAllSelect, 'all') |
||||
|
}, |
||||
|
// 选择某行 |
||||
|
selectTr(selection, row) { |
||||
|
this.$set(row, 'isChecked', !row.isChecked) |
||||
|
this.$nextTick(() => { |
||||
|
this.isAllSelect = row.isChecked |
||||
|
this.toggleSelect(row, row.isChecked, 'tr') |
||||
|
}) |
||||
|
}, |
||||
|
// 递归子级 |
||||
|
toggleSelect(data, flag, type) { |
||||
|
if (type === 'all') { |
||||
|
if (data.length > 0) { |
||||
|
data.forEach((item) => { |
||||
|
this.toggleSelection(item, flag) |
||||
|
if (item.children && item.children.length > 0) { |
||||
|
this.toggleSelect(item.children, flag, type) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
if (data.children && data.children.length > 0) { |
||||
|
data.children.forEach((item) => { |
||||
|
item.isChecked = flag |
||||
|
this.$refs.table.toggleRowSelection(item, flag) |
||||
|
this.toggleSelect(item, flag, type) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 改变选中 |
||||
|
toggleSelection(row, flag) { |
||||
|
this.$set(row, 'isChecked', flag) |
||||
|
this.$nextTick(() => { |
||||
|
if (flag) { |
||||
|
this.$refs.table.toggleRowSelection(row, flag) |
||||
|
} else { |
||||
|
this.$refs.table.clearSelection() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// table - 当前选中得row |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
doExport(data) { |
||||
|
crud.downloadLoading = true |
||||
|
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const ids = [] |
||||
|
data.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
const params = { |
||||
|
'classIds': ids |
||||
|
} |
||||
|
exportFile(this.baseApi + '/api/archivesClass/download?' + qs.stringify(params, { indices: false })) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue