|
|
@@ -0,0 +1,337 @@
|
|
|
+<template>
|
|
|
+ <zj-page-container direction="row">
|
|
|
+ <div style="min-width: 220px; height: 100%">
|
|
|
+ <zj-page-container>
|
|
|
+ <div class="title">
|
|
|
+ <el-button
|
|
|
+ style="margin-right: 5px"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="tianjiayiji"
|
|
|
+ ></el-button>
|
|
|
+ <el-button style="margin-right: 5px" size="mini" icon="el-icon-search" @click="getTreeListData"></el-button>
|
|
|
+ <el-input size="mini" v-model="filterText" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <zj-page-fill>
|
|
|
+ <el-tree
|
|
|
+ :data="treeList"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ :highlight-current="true"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="listTree"
|
|
|
+ >
|
|
|
+ <div class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span>
|
|
|
+ <el-button size="mini" type="text" @click="eidbumen(data)">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" type="text" @click="delbumen(data)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-tree>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <template-page
|
|
|
+ ref="pageRef"
|
|
|
+ :getList="getList"
|
|
|
+ :columnParsing="columnParsing"
|
|
|
+ :optionsEvensGroup="optionsEvensGroup"
|
|
|
+ :tableAttributes="tableAttributes"
|
|
|
+ :tableEvents="tableEvents"
|
|
|
+ :operationColumnWidth="160"
|
|
|
+ :operation="operation()"
|
|
|
+ >
|
|
|
+ <el-dialog title="申述大类" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
|
|
|
+ <el-form ref="form" :model="form" label-width="100px" size="mini">
|
|
|
+ <el-form-item label="大类名称">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="queding">确定</el-button>
|
|
|
+ <el-button @click="handleClose">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="申述小类" :visible.sync="dialogVisible2" width="500px" :before-close="handleClose2">
|
|
|
+ <el-form ref="form" :model="form2" label-width="120px" size="mini">
|
|
|
+ <el-form-item label="问题大类">
|
|
|
+ <el-input disabled v-model="form2.parentName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小类名称">
|
|
|
+ <el-input v-model="form2.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-radio-group v-model="form2.status">
|
|
|
+ <el-radio :label="true">启用</el-radio>
|
|
|
+ <el-radio :label="false">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="queding2">确定</el-button>
|
|
|
+ <el-button @click="handleClose2">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </template-page>
|
|
|
+ </zj-page-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TemplatePage from '@/components/template/template-page-1.vue'
|
|
|
+import {
|
|
|
+ appraiseApplyCategoryList,
|
|
|
+ appraiseApplyCategorySave,
|
|
|
+ appraiseApplyCategoryDetail,
|
|
|
+ appraiseApplyCategoryImport,
|
|
|
+ appraiseApplyCategoryDel
|
|
|
+} from '@/api/explainTypeConfig.js'
|
|
|
+import operation_mixin from '@/components/template/operation_mixin.js'
|
|
|
+import { commonTemplateDownload } from '@/api/common.js'
|
|
|
+import import_mixin from '@/components/template/import_mixin.js'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ TemplatePage
|
|
|
+ },
|
|
|
+ mixins: [operation_mixin, import_mixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 表格属性
|
|
|
+ tableAttributes: {},
|
|
|
+ // 表格事件
|
|
|
+ tableEvents: {},
|
|
|
+ visible: false,
|
|
|
+ item: null,
|
|
|
+ treeList: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ filterText: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ status: true
|
|
|
+ },
|
|
|
+ dialogVisible2: false,
|
|
|
+ form2: {
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ parentName: '',
|
|
|
+ status: true
|
|
|
+ },
|
|
|
+ adminDept: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getTreeListData()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 事件组合
|
|
|
+ optionsEvensGroup() {
|
|
|
+ return [
|
|
|
+ [
|
|
|
+ ...(() => {
|
|
|
+ if (this.adminDept) {
|
|
|
+ return [
|
|
|
+ [
|
|
|
+ this.optionsEvensAuth('add', {
|
|
|
+ click: () => {
|
|
|
+ if (this?.adminDept?.id) {
|
|
|
+ this.form2 = {
|
|
|
+ name: '',
|
|
|
+ parentId: this?.adminDept?.id,
|
|
|
+ parentName: this?.adminDept?.name,
|
|
|
+ status: true
|
|
|
+ }
|
|
|
+ this.dialogVisible2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ })(),
|
|
|
+ [
|
|
|
+ this.optionsEvensAuth('import', ({ moduleName }) => {
|
|
|
+ return {
|
|
|
+ name: moduleName,
|
|
|
+ render: () => {
|
|
|
+ return this.importButton(appraiseApplyCategoryImport, moduleName)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ this.optionsEvensAuth('download', {
|
|
|
+ click: () => {
|
|
|
+ commonTemplateDownload({ name: '评价问题类别模板.xlsx' }, `${this.$route.meta.title}`)
|
|
|
+ .then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: '下载成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$message.error('下载失败')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this?.$refs?.listTree?.filter?.(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true
|
|
|
+ return data.name.indexOf(value) !== -1
|
|
|
+ },
|
|
|
+ // 请求属性数据
|
|
|
+ getTreeListData() {
|
|
|
+ appraiseApplyCategoryList({
|
|
|
+ orderBy: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: -1,
|
|
|
+ params: [{ param: 'a.parent_id', compare: '=', value: '0' }]
|
|
|
+ }).then(res => {
|
|
|
+ this.treeList = res.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 树形选中
|
|
|
+ handleNodeClick(e) {
|
|
|
+ this.adminDept = { ...e }
|
|
|
+ this.$refs.pageRef?.refreshList()
|
|
|
+ },
|
|
|
+ // 列表请求函数
|
|
|
+ getList(pam, cb) {
|
|
|
+ try {
|
|
|
+ if (this?.adminDept?.id) {
|
|
|
+ pam.params.push({ param: 'a.parent_id', compare: '=', value: this?.adminDept?.id })
|
|
|
+ } else {
|
|
|
+ pam.params.push({ param: 'a.parent_id', compare: '=', value: 'XXXXXXXXXXXXXXXXXXXX' })
|
|
|
+ }
|
|
|
+ cb && cb(pam)
|
|
|
+ return appraiseApplyCategoryList(pam)
|
|
|
+ } catch (err) {
|
|
|
+ } finally {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表格列解析渲染数据更改
|
|
|
+ columnParsing(item, defaultData) {
|
|
|
+ return defaultData
|
|
|
+ },
|
|
|
+ operation() {
|
|
|
+ return this.operationBtn({
|
|
|
+ edit: {
|
|
|
+ click: ({ row, index, column }) => {
|
|
|
+ this.form2 = { ...row }
|
|
|
+ this.dialogVisible2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tianjiayiji() {
|
|
|
+ this.form = { name: '', parentId: 0, status: true }
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ eidbumen(data) {
|
|
|
+ this.form = { ...data }
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ delbumen(data) {
|
|
|
+ appraiseApplyCategoryDel([data.id]).then(res => {
|
|
|
+ this.getTreeListData()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queding() {
|
|
|
+ if (!this.form.name) {
|
|
|
+ this.$message.warning('大类名称不能为空')
|
|
|
+ }
|
|
|
+ appraiseApplyCategorySave(this.form).then(res => {
|
|
|
+ this.getTreeListData()
|
|
|
+ this.handleClose()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '设置成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.form = {
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ status: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // -----------------------------------------
|
|
|
+ queding2() {
|
|
|
+ if (!this.form2.name) {
|
|
|
+ this.$message.warning('小类名称不能为空')
|
|
|
+ }
|
|
|
+ appraiseApplyCategorySave({
|
|
|
+ ...this.form2
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.pageRef?.refreshList()
|
|
|
+ this.handleClose2()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '设置成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClose2() {
|
|
|
+ this.dialogVisible2 = false
|
|
|
+ this.form2 = {
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ status: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .zj-page-fill-scroll {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+</style>
|
linwenxin