301 lines
9.5 KiB
Vue
301 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/acupointManagement' }"
|
|
>穴位管理</el-breadcrumb-item
|
|
>
|
|
<el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div style="margin-top:20px; width: 600px">
|
|
<el-form ref="form" :model="form" label-width="80px" :rules="formRule">
|
|
<el-form-item label="穴位名称" prop="title">
|
|
<el-input
|
|
v-model="form.title"
|
|
placeholder="请输入穴位名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="穴位别名" prop="alias">
|
|
<el-input
|
|
v-model="form.alias"
|
|
placeholder="请输入穴位别名"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属分类" prop="pointCategoryId">
|
|
<el-cascader
|
|
:options="treeList"
|
|
:props="cateProps"
|
|
:emitPath= "false"
|
|
|
|
@change="handleChange1"
|
|
>
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="排序" prop="sort">
|
|
<el-input v-model="form.sort" type="number"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="封面图">
|
|
<el-upload
|
|
:limit="3"
|
|
class="el-uploadfeng noneBtnImg"
|
|
:action="baseUrl + '/oss/fileoss'"
|
|
list-type="picture-card"
|
|
multiple
|
|
:on-exceed="handleExceed"
|
|
:file-list="fileList"
|
|
:on-success="handleSuccess"
|
|
accept=".jpeg,.jpg,.gif,.png"
|
|
:on-remove="handleRemoveNovel"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="所属经络" prop="meridian">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.meridian"
|
|
placeholder="请输入所属经络"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="解剖" prop="anatomy">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.anatomy"
|
|
placeholder="请输入解剖"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="定位" prop="position">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.position"
|
|
placeholder="请输入定位"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="主治" prop="indication">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.indication"
|
|
placeholder="请输入主治"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="配伍" prop="compatibility">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.compatibility"
|
|
placeholder="请输入配伍"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文献" prop="literature">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="form.literature"
|
|
placeholder="请输入文献"
|
|
></el-input>
|
|
</el-form-item>
|
|
<div style="text-align:center">
|
|
<el-button type="primary" @click="submit">保 存</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// const bc = new BroadcastChannel("myChannel");
|
|
import global from "../../common/common.vue"; //引入共用组间
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: global.baseUrl,
|
|
pageTitle: this.$route.query.title,
|
|
form: {
|
|
id: this.$route.query.cid, // 穴位内容id
|
|
title: "",
|
|
pointCategoryId: this.$route.query.pid, // 父级的分类id
|
|
alias: "", //别名
|
|
meridian: "", //所属经络
|
|
position: "", //定位
|
|
anatomy: "", //解剖
|
|
indication: "", //主治
|
|
compatibility: "", //配伍
|
|
literature: "", //文献
|
|
sort: 0,
|
|
imageList: []
|
|
},
|
|
treeList:[],
|
|
cateProps: {
|
|
value: "id",
|
|
label: "title"
|
|
},
|
|
fileList: [],
|
|
formRule: {
|
|
title: [{ required: true, message: "穴位名称不能为空" }],
|
|
// alias: [{ required: true, message: "穴位别名不能为空" }],
|
|
meridian: [{ required: true, message: "所属经络不能为空" }],
|
|
// anatomy: [{ required: true, message: "解剖不能为空" }],
|
|
position: [{ required: true, message: "定位不能为空" }],
|
|
indication: [{ required: true, message: "主治不能为空" }],
|
|
// compatibility: [{ required: true, message: "配伍不能为空" }],
|
|
// literature: [{ required: true, message: "文献不能为空" }]
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getCatTreeList()
|
|
this.getDetail();
|
|
|
|
},
|
|
methods: {
|
|
handleChange1(e){
|
|
// console.log(e,'e')
|
|
},
|
|
getCatTreeList() {
|
|
this.loading = true;
|
|
this.$http({
|
|
url: this.$http.adornUrl("/book/point/getPointCategoryList"),
|
|
method: "post"
|
|
})
|
|
.then(({ data }) => {
|
|
// console.log(data, "树形结构");
|
|
if (data.code == 0 && data.categorys.length > 0) {
|
|
this.treeList = data.categorys;
|
|
// console.log("执行后的结果", this.cateList);
|
|
//
|
|
} else {
|
|
this.treeList = [];
|
|
}
|
|
})
|
|
.catch(({ e }) => {
|
|
console.log(e, "e");
|
|
});
|
|
},
|
|
// 获取穴位详情
|
|
getDetail() {
|
|
if (this.form.id) {
|
|
// 编辑
|
|
this.$http({
|
|
url: this.$http.adornUrl("/book/point/getPointDetail"),
|
|
method: "post",
|
|
data: this.$http.adornData({
|
|
pointId: this.form.id
|
|
})
|
|
})
|
|
.then(({ data }) => {
|
|
if (data.code == 0) {
|
|
// console.log("内容详情", data);
|
|
this.form.alias = data.point.alias;
|
|
this.form.anatomy = data.point.anatomy;
|
|
this.form.compatibility = data.point.compatibility;
|
|
this.form.imageList = data.point.imageList;
|
|
this.form.indication = data.point.indication;
|
|
this.form.literature = data.point.literature;
|
|
this.form.meridian = data.point.meridian;
|
|
this.form.pointCategoryId = data.point.pointCategoryId;
|
|
this.form.position = data.point.position;
|
|
this.form.sort = data.point.sort;
|
|
this.form.title = data.point.title;
|
|
if (data.point.imageList.length > 0) {
|
|
data.point.imageList.forEach((element, index) => {
|
|
this.fileList.push({
|
|
name: index,
|
|
url: element
|
|
});
|
|
});
|
|
// console.log("图片列表格式", this.fileList);
|
|
}
|
|
} else {
|
|
}
|
|
})
|
|
.catch(({ e }) => {
|
|
// console.log(e, "e");
|
|
});
|
|
} else {
|
|
|
|
}
|
|
},
|
|
handleRemoveNovel(file) {
|
|
// console.log(file, this.fileList);
|
|
if (this.form.imageList.length > 0) {
|
|
this.form.imageList.forEach((element, index) => {
|
|
{
|
|
if (element == file.url) {
|
|
this.form.imageList.splice(index, 1);
|
|
}
|
|
}
|
|
});
|
|
// console.log("删除后", this.form.imageList);
|
|
}
|
|
// this.dataForm.images = [];
|
|
},
|
|
handleSuccess(file, fileList) {
|
|
// console.log(file, fileList);
|
|
// this.fileList.push();
|
|
this.form.imageList.push(file.url);
|
|
// console.log(this.fileList, 66);
|
|
// this.dataForm.novel = file.url
|
|
},
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(`当前限制选择 3 个文件`);
|
|
},
|
|
// 提交保存
|
|
submit() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
let url = "";
|
|
this.form.id
|
|
? (url = "/book/point/editPoint")
|
|
: (url = "/book/point/addPoint");
|
|
// console.log()
|
|
this.$http({
|
|
url: this.$http.adornUrl(url),
|
|
method: "post",
|
|
data: this.$http.adornData({
|
|
id: this.form.id,
|
|
title: this.form.title,
|
|
pointCategoryId: this.form.pointCategoryId,
|
|
alias: this.form.alias, //别名
|
|
meridian: this.form.meridian, //所属经络
|
|
position: this.form.position, //定位
|
|
anatomy: this.form.anatomy, //解剖
|
|
indication: this.form.indication, //主治
|
|
compatibility: this.form.compatibility, //配伍
|
|
literature: this.form.literature, //文献
|
|
sort: this.form.sort,
|
|
imageList: this.form.imageList
|
|
})
|
|
})
|
|
.then(({ data }) => {
|
|
if (data.code == 0) {
|
|
this.$message.success("操作成功");
|
|
// bc.postMessage("updateList");
|
|
this.$nextTick(() => {
|
|
this.$refs["form"].resetFields();
|
|
});
|
|
this.fileList = [];
|
|
// this.getCatTreeList();
|
|
}
|
|
})
|
|
.catch(({ e }) => {
|
|
console.log(e, "e");
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scope>
|
|
.el-uploadfeng li,
|
|
.el-uploadfeng .el-upload {
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
}
|
|
.el-uploadfeng .el-icon-plus {
|
|
line-height: 80px;
|
|
}
|
|
.el-uploadfeng .el-upload--picture-card{line-height: 80px;}
|
|
.flexbox {
|
|
display: flex;
|
|
}
|
|
</style>
|