初始化
This commit is contained in:
aixianling
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<section class="examination-approval">
|
||||
<ai-list v-if="!showList">
|
||||
<template #title>
|
||||
<ai-title title="审批分类" :isShowBottomBorder="true" :instance="instance"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" icon="iconfont iconAdd" @click="showList = true">添加分类</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
size="small"
|
||||
placeholder="分类名称/创建人"
|
||||
@keyup.enter.native="search.current = 1, getList()"
|
||||
@clear="reset"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:header-cell-style="{fontWeight:'bold',color:'#333'}"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
|
||||
<el-table-column label="是否启用" slot="status" align="center" width="150">
|
||||
<template v-slot="{row}">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
@change="onChange(row)" active-value="1" inactive-value="0"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" slot="options" align="center" width="150">
|
||||
<template v-slot="{row}">
|
||||
<el-button type="text" title="修改" @click="editInfo(row)">修改</el-button>
|
||||
<el-button type="text" title="删除" @click="deleteInfo(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<addClassification v-else @back="showList=false;row={},getList()" :instance="instance"
|
||||
:row="row"></addClassification>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import addClassification from "./components/addClassification";
|
||||
import day from 'dayjs'
|
||||
|
||||
export default {
|
||||
name: "AppExaminationApproval",
|
||||
label: "审批分类",
|
||||
components: {addClassification},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: "",
|
||||
},
|
||||
total: 0,
|
||||
tableData: [],
|
||||
row: {},
|
||||
showList: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{
|
||||
prop: 'name',
|
||||
align: 'left',
|
||||
label: '分类名称',
|
||||
},
|
||||
{
|
||||
prop: 'desc',
|
||||
align: 'left',
|
||||
label: '分类描述',
|
||||
},
|
||||
{
|
||||
prop: 'createUserName',
|
||||
align: 'center',
|
||||
label: '创建人',
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
align: 'center',
|
||||
label: '创建日期',
|
||||
},
|
||||
{
|
||||
prop: 'showIndex',
|
||||
align: 'center',
|
||||
label: '排序',
|
||||
},
|
||||
{
|
||||
slot: 'status',
|
||||
align: 'center',
|
||||
label: '是否启用',
|
||||
},
|
||||
{
|
||||
slot: 'options',
|
||||
align: 'center',
|
||||
label: '操作',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 编辑
|
||||
* */
|
||||
editInfo(row) {
|
||||
this.row = row
|
||||
this.showList = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 启用、停用
|
||||
*/
|
||||
onChange(row) {
|
||||
this.instance.post(`/app/zwspapprovalclassification/enable?id=${row.id}`).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success(+row.status ? "已启用" : '不启用')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.search.name = ""
|
||||
this.getList()
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.instance.post(`/app/zwspapprovalclassification/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
},
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.tableData = res.data.records.map(e => ({
|
||||
...e,
|
||||
createTime: day(e.createTime).format("YYYY-MM-DD"),
|
||||
}));
|
||||
this.total = res.data.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
deleteInfo({id}) {
|
||||
this.$confirm("是否删除？").then(() => {
|
||||
this.instance.post(`/app/zwspapprovalclassification/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("删除成功")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.examination-approval {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
|
||||
.iconfont {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::v-deep .ai-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<section class="add-classification">
|
||||
<ai-detail>
|
||||
<ai-title slot="title" :title="pageTitle" isShowBack isShowBottomBorder @onBackClick="$emit('back')"/>
|
||||
<template #content>
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<el-form :model="form" :rules="rules" ref="addClassification" label-suffix="：" label-width="100px"
|
||||
size="small">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model.trim="form.name" size="small" clearable placeholder="如“社会保障”（限10个字）" :maxlength="10"
|
||||
show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="showIndex">
|
||||
<el-input v-model.number="form.showIndex" size="small" clearable placeholder="请输入数字，数字越小排序越前"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="desc">
|
||||
<el-input v-model.trim="form.desc" type="textarea" size="small" clearable placeholder="限500个字"
|
||||
:maxlength="500" show-word-limit :rows="4"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图标" prop="icon" class="icon-form">
|
||||
<el-upload ref="iconUploader" action="#" :auto-upload="false" :on-change="handleUploadIcon" :limit="1"
|
||||
:show-file-list="false">
|
||||
<el-image v-if="!!form.icon" class="el-upload-list__item" :src="form.icon">
|
||||
<i class="el-icon-picture-outline"/>
|
||||
</el-image>
|
||||
<div v-else class="el-upload--picture-card"><i class="el-icon-plus"/></div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-radio v-model="form.status" label="1">是</el-radio>
|
||||
<el-radio v-model="form.status" label="0">否</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="btn" @click="$emit('back')">取消</el-button>
|
||||
<el-button class="btn" type="primary" @click="submit">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "addClassification",
|
||||
props: {
|
||||
instance: Function,
|
||||
row: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: "",
|
||||
name: "",
|
||||
showIndex: "",
|
||||
desc: "",
|
||||
icon: "",
|
||||
status: "1"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageTitle() {
|
||||
return this.row?.id ? "编辑分类" : "添加分类"
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
name: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
|
||||
showIndex: [
|
||||
{required: true, message: '请输入排序数字'},
|
||||
{min: 1, max: 999, type: "number", message: '排序只能输入1~999之间的整数'},
|
||||
],
|
||||
desc: [{required: true, message: '请填写描述', trigger: 'blur'}],
|
||||
icon: [{required: true, message: '请选择分类图标', trigger: 'blur'}],
|
||||
status: [{required: true, message: '请选择是否启用', trigger: 'change'}],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
submit() {
|
||||
this.$refs['addClassification'].validate(valid => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/zwspapprovalclassification/addOrUpdate`, {
|
||||
...this.form,
|
||||
status: Number(this.form.status)
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(this.row.id ? "编辑成功" : "添加成功")
|
||||
this.$emit('back')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
getDetail() {
|
||||
this.instance.post(`/app/zwspapprovalclassification/queryDetailById?id=${this.row.id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 上传图标
|
||||
*/
|
||||
handleUploadIcon(file) {
|
||||
let data = new FormData()
|
||||
data.append("file", file.raw)
|
||||
this.instance.post(`/admin/file/add`, data).then(res => {
|
||||
if (res?.data) {
|
||||
this.form.icon = res.data?.[0].replace(/;.*/, '')
|
||||
}
|
||||
this.$refs.iconUploader?.clearFiles()
|
||||
}).catch(() => this.$refs.iconUploader?.clearFiles());
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.row.id) {
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-classification {
|
||||
height: 100%;
|
||||
|
||||
.iconAudit {
|
||||
font-size: 36px;
|
||||
color: #3D94FB;
|
||||
}
|
||||
|
||||
.el-upload-list__item {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.icon-form {
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
width: 96px;
|
||||
height: 28px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.icon-style {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.icon:hover {
|
||||
border-color: #5088FF;
|
||||
}
|
||||
|
||||
.icon_color {
|
||||
border-color: #5088FF;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user