初始化
This commit is contained in:
aixianling
@@ -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