脉穴管理
This commit is contained in:
@fawn-nine
300
src/views/modules/acupoint/acupointDetail.vue
Normal file
300
src/views/modules/acupoint/acupointDetail.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user