<template>
|
<div class="app-container">
|
<!-- 搜索工作栏 -->
|
<el-form
|
class="-mb-15px"
|
:model="queryParams"
|
ref="queryform"
|
:inline="true"
|
label-width="68px"
|
>
|
<el-form-item label="分类名" prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入分类名"
|
clearable
|
@keyup.enter="handleQuery"
|
class="!w-240px"
|
/>
|
</el-form-item>
|
<el-form-item label="分类标志" prop="code">
|
<el-input
|
v-model="queryParams.code"
|
placeholder="请输入分类标志"
|
clearable
|
@keyup.enter="handleQuery"
|
class="!w-240px"
|
/>
|
</el-form-item>
|
<el-form-item label="分类状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="创建时间" prop="createTime">
|
<el-date-picker
|
v-model="queryParams.createTime"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
type="daterange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
class="!w-240px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="handleQuery" icon="el-icon-search"> 搜索</el-button>
|
<el-button @click="resetQuery" icon="el-icon-refresh"> 重置</el-button>
|
<el-button
|
type="primary"
|
icon="el-icon-plus"
|
plain
|
@click="openForm()"
|
v-hasPermi="['bpm:category:create']"
|
>新增
|
</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 列表 -->
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
<el-table-column label="分类编号" align="center" prop="id" />
|
<el-table-column label="分类名" align="center" prop="name" />
|
<el-table-column label="分类标志" align="center" prop="code" />
|
<!-- <el-table-column label="分类描述" align="center" prop="description" />-->
|
<el-table-column label="分类状态" align="center" prop="status">
|
<template v-slot="scope">
|
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
</template>
|
</el-table-column>
|
<el-table-column label="分类排序" align="center" prop="sort" />
|
<el-table-column
|
label="创建时间"
|
align="center"
|
prop="createTime"
|
width="180px"
|
/>
|
<el-table-column label="操作" align="center">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
@click="openForm(scope.row.id)"
|
v-hasPermi="['bpm:category:update']"
|
>
|
编辑
|
</el-button>
|
<el-button
|
link
|
type="danger"
|
@click="handleDelete(scope.row.id)"
|
v-hasPermi="['bpm:category:delete']"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<pagination
|
:total="total"
|
v-model:page="queryParams.pageNo"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 表单弹窗:添加/修改 -->
|
<el-dialog :title="title" :visible.sync="open">
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="formRules"
|
label-width="100px"
|
v-loading="formLoading"
|
>
|
<el-form-item label="分类名" prop="name">
|
<el-input v-model="form.name" placeholder="请输入分类名" />
|
</el-form-item>
|
<el-form-item label="分类标志" prop="code">
|
<el-input v-model="form.code" placeholder="请输入分类标志" />
|
</el-form-item>
|
<el-form-item label="分类状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="分类排序" prop="sort">
|
<el-input-number
|
v-model="form.sort"
|
placeholder="请输入分类排序"
|
class="!w-1/1"
|
:precision="0"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
<el-button @click="open = false">取 消</el-button>
|
</template>
|
</el-dialog>`
|
</div>
|
</template>
|
|
<script>
|
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
import {
|
createCategory,
|
deleteCategory,
|
getCategory,
|
getCategoryPage,
|
updateCategory
|
} from '@/api/bpm/category'
|
|
|
export default {
|
name: "BpmCategory",
|
computed: {
|
DICT_TYPE() {
|
return DICT_TYPE
|
}
|
},
|
|
data() {
|
return {
|
// 遮罩层
|
loading: true,
|
// 总条数
|
total: 0,
|
// 表格数据
|
list: [],
|
open: false, // 弹窗的是否展示
|
title: '', // 弹窗的标题
|
formLoading: false, // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
// 查询参数
|
queryParams: {
|
pageNo: 1,
|
pageSize: 10,
|
name: undefined,
|
code: undefined,
|
status: undefined,
|
createTime: []
|
},
|
form: {
|
id: undefined,
|
name: undefined,
|
code: undefined,
|
status: undefined,
|
sort: undefined
|
},
|
formRules: {
|
name: [{ required: true, message: '分类名不能为空', trigger: 'blur' }],
|
code: [{ required: true, message: '分类标志不能为空', trigger: 'blur' }],
|
status: [{ required: true, message: '分类状态不能为空', trigger: 'blur' }],
|
sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
|
},
|
// 数据字典
|
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
};
|
},
|
created() {
|
const key = this.$route.query && this.$route.query.key
|
if (key) {
|
this.queryParams['key'] = key
|
}
|
this.getList();
|
},
|
methods: {
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNo = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
/** 查询流程分类列表 */
|
getList() {
|
this.loading = true;
|
getCategoryPage(this.queryParams).then(response => {
|
this.list = response.data.list;
|
this.total = response.data.total;
|
this.loading = false;
|
}
|
);
|
},
|
openForm(id) {
|
console.log(id)
|
this.reset();
|
if(id) {
|
getCategory(id).then(response => {
|
this.form = response.data;
|
this.open = true;
|
this.title = "编辑";
|
});
|
} else {
|
// 打开表单,并设置初始化
|
this.open = true;
|
this.title = "新增";
|
}
|
},
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
if (!valid) {
|
return;
|
}
|
// 修改的提交
|
if (this.form.id != null) {
|
updateCategory(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
return;
|
}
|
// 添加的提交
|
createCategory(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
});
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const ids = row.id || this.ids;
|
this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项?').then(function() {
|
return deleteCategory(ids);
|
}).then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
reset() {
|
this.form = {
|
id: undefined,
|
name: undefined,
|
code: undefined,
|
status: undefined,
|
sort: undefined
|
},
|
this.resetForm("form");
|
},
|
}
|
};
|
</script>
|