Skip to content

P
pica.cloud.web-education-admin
提交 3d63519c 编写于 作者: chendeli's avatar chendeli
浏览文件
操作

商品管理ui

上级 b03a8146
显示空白字符变更
内嵌 并排
正在显示 包含 204 行增加 和 179 行删除
src/views/goods/create-good.vue
浏览文件 @ 3d63519c
...@@ -21,48 +21,50 @@ ...@@ -21,48 +21,50 @@
<div class="basic-item-icon"> <div class="basic-item-icon">
<div class="part-tit">通用信息</div> <div class="part-tit">通用信息</div>
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="goods_name">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.goods_name"
placeholder="请输入商品名称" placeholder="请输入商品名称"
style="width:70%;" show-word-limit
maxlength="60"
></el-input> ></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/60</span> <!-- <span class="word-num">{{(formData.goods_name).replace(/\s+/g,"").length}}/60</span> -->
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="商品介绍" prop="introduce"> <el-form-item label="商品介绍" prop="goods_description">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
type="textarea" type="textarea"
rows="2" rows="4"
maxlength="40"
size="small" size="small"
v-model="formData.introduce" v-model="formData.goods_description"
placeholder="请输入商品介绍" placeholder="请输入商品介绍"
style="width:70%;" maxlength="1000"
show-word-limit
></el-input> ></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/1000</span> <!-- <span class="word-num">{{(formData.goods_description).replace(/\s+/g,"").length}}/1000</span> -->
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="商品头图" class="required-label"> <el-form-item label="商品头图" class="required-label">
<el-upload <el-upload
v-model="formData.headUrl" v-model="formData.goods_image"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadPic1" :before-upload="beforeUploadPic1"
> >
<img <img
v-if="formData.headUrl" v-if="formData.goods_image"
:src="formData.headUrl" :src="formData.goods_image"
@mouseover.stop="imgMouseOver1=true" @mouseover.stop="imgMouseOver1=true"
class="bg-img" class="bg-img"
/> />
<img v-if="!formData.headUrl" class="bg-img" src="../../assets/image/small.png" /> <img v-if="!formData.goods_image" class="bg-img" src="../../assets/image/small.png" />
<div <div
class="img-delete" class="img-delete"
v-show="imgMouseOver1" v-show="imgMouseOver1"
...@@ -77,10 +79,11 @@ ...@@ -77,10 +79,11 @@
<p>支持jpeg, png格式</p> <p>支持jpeg, png格式</p>
</div> </div>
</el-upload> </el-upload>
<p class="upload-message" v-if="!isGoods_image">请上传商品头图</p>
</el-form-item> </el-form-item>
<el-form-item label="商品类型"> <el-form-item label="商品类型" prop="goods_type">
<el-select <el-select
v-model="formData.type" v-model="formData.goods_type"
placeholder="请选择商品类型" placeholder="请选择商品类型"
size="small" size="small"
clearable> clearable>
...@@ -97,11 +100,11 @@ ...@@ -97,11 +100,11 @@
<div class="basic-item-icon"> <div class="basic-item-icon">
<div class="part-tit">药品信息</div> <div class="part-tit">药品信息</div>
<el-form-item label="批准文号" prop="name"> <el-form-item label="批准文号" prop="approval_number">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.approval_number"
placeholder="请输入批准文号" placeholder="请输入批准文号"
style="width:70%;" style="width:70%;"
></el-input> ></el-input>
...@@ -109,35 +112,39 @@ ...@@ -109,35 +112,39 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="药品通用名称" prop="introduce"> <el-form-item label="药品通用名称" prop="medic_common_name">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.medic_common_name"
placeholder="请输入药品通用名称" placeholder="请输入药品通用名称"
style="width:70%;" style="width:70%;"
maxlength="60"
show-word-limit
></el-input> ></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/60</span> <!-- <span class="word-num">{{(formData.medic_common_name).replace(/\s+/g,"").length}}/60</span> -->
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="药品商品名称" prop="introduce"> <el-form-item label="药品商品名称" prop="medic_goods_name">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.medic_goods_name"
placeholder="请输入药品商品名称" placeholder="请输入药品商品名称"
style="width:70%;"
maxlength="60"
show-word-limit
></el-input> ></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/60</span> <!-- <span class="word-num">{{(formData.medic_goods_name).replace(/\s+/g,"").length}}/60</span> -->
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="药品规格" prop="introduce"> <el-form-item label="药品规格" prop="size">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.size"
placeholder="请输入药品规格" placeholder="请输入药品规格"
style="width:70%;" style="width:70%;"
></el-input> ></el-input>
...@@ -146,15 +153,15 @@ ...@@ -146,15 +153,15 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<div class="inline"> <div class="inline">
<el-form-item label="是否是处方药" prop="introduce"> <el-form-item label="是否是处方药" prop="otc">
<el-col :span="24"> <el-col :span="24">
<el-radio size="mini" v-model="formData.radio" label="1">处方药</el-radio> <el-radio size="mini" v-model="formData.otc" label="1">处方药</el-radio>
<el-radio v-model="formData.radio" label="2">非处方药</el-radio> <el-radio v-model="formData.otc" label="0">非处方药</el-radio>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="剂型"> <el-form-item label="剂型" prop="dosage_id">
<el-select <el-select
v-model="formData.type" v-model="formData.dosage_id"
placeholder="请选择药品剂型" placeholder="请选择药品剂型"
size="small" size="small"
clearable> clearable>
...@@ -167,11 +174,11 @@ ...@@ -167,11 +174,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
<el-form-item label="用法用量" prop="introduce"> <el-form-item label="用法用量" prop="usage">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.usage"
placeholder="请输入用法用量" placeholder="请输入用法用量"
style="width:70%;" style="width:70%;"
></el-input> ></el-input>
...@@ -180,9 +187,9 @@ ...@@ -180,9 +187,9 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="药品类型" prop="dynamicFlag"> <el-form-item label="药品类型" prop="category_id_level2">
<el-select <el-select
v-model="formData.dynamicFlag" v-model="formData.category_id_level2"
placeholder="请选择药品类型" placeholder="请选择药品类型"
size="small" size="small"
clearable clearable
...@@ -242,11 +249,11 @@ ...@@ -242,11 +249,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
<el-form-item label="生产厂家" prop="introduce"> <el-form-item label="生产厂家" prop="manufacturer">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.manufacturer"
placeholder="请输入生产厂家" placeholder="请输入生产厂家"
style="width:70%;" style="width:70%;"
></el-input> ></el-input>
...@@ -255,9 +262,9 @@ ...@@ -255,9 +262,9 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<div class="inline"> <div class="inline">
<el-form-item label="适用科室" prop="dynamicFlag"> <el-form-item label="适用科室" prop="department">
<el-select <el-select
v-model="formData.dynamicFlag" v-model="formData.department"
placeholder="请选择适用科室" placeholder="请选择适用科室"
size="small" size="small"
clearable clearable
...@@ -270,11 +277,11 @@ ...@@ -270,11 +277,11 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="治疗疾病" prop="introduce"> <el-form-item label="治疗疾病" prop="treat_disease">
<el-col :span="24"> <el-col :span="24">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.treat_disease"
placeholder="请输入治疗疾病" placeholder="请输入治疗疾病"
></el-input> ></el-input>
...@@ -284,11 +291,11 @@ ...@@ -284,11 +291,11 @@
</el-form-item> </el-form-item>
</div> </div>
<el-form-item label="有效期" prop="introduce"> <el-form-item label="有效期" prop="expired_time">
<el-col :span="13"> <el-col :span="13">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.expired_time"
placeholder="请输入有效期" placeholder="请输入有效期"
style="width:70%;" style="width:70%;"
></el-input> ></el-input>
...@@ -298,19 +305,19 @@ ...@@ -298,19 +305,19 @@
</el-form-item> </el-form-item>
<el-form-item label="药品说明书" class="required-label"> <el-form-item label="药品说明书" class="required-label">
<el-upload <el-upload
v-model="formData.headUrl" v-model="formData.specification_url"
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadPic1" :before-upload="beforeUploadPic1"
> >
<img <img
v-if="formData.headUrl" v-if="formData.specification_url"
:src="formData.headUrl" :src="formData.specification_url"
@mouseover.stop="imgMouseOver1=true" @mouseover.stop="imgMouseOver1=true"
class="bg-img" class="bg-img"
/> />
<img v-if="!formData.headUrl" class="bg-img" src="../../assets/image/small.png" /> <img v-if="!formData.specification_url" class="bg-img" src="../../assets/image/small.png" />
<div <div
class="img-delete" class="img-delete"
v-show="imgMouseOver1" v-show="imgMouseOver1"
...@@ -325,6 +332,7 @@ ...@@ -325,6 +332,7 @@
<p>支持jpeg, png格式</p> <p>支持jpeg, png格式</p>
</div> </div>
</el-upload> </el-upload>
<p class="upload-message" v-if="!isSpecification_url">请上传药品说明书</p>
</el-form-item> </el-form-item>
</div> </div>
...@@ -357,12 +365,18 @@ ...@@ -357,12 +365,18 @@
<div class="inline"> <div class="inline">
<el-form-item label="库存" prop="name"> <el-form-item label="库存" prop="name">
<el-col :span="20"> <el-col :span="20">
<el-input <div class="stock-com">
<span class="sp sp-l"><i class="el-icon-minus"></i></span>
<span class="sp sp-c">{{formData.stock}}</span>
<span class="sp sp-r"><i class="el-icon-plus"></i></span>
</div>
<!-- <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.name"
placeholder="请输入库存" placeholder="请输入库存"
></el-input> ></el-input> -->
<!-- <el-input-number readonly size="small" v-model="formData.stock"></el-input-number> -->
<!-- <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/60</span> --> <!-- <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/60</span> -->
</el-col> </el-col>
</el-form-item> </el-form-item>
...@@ -424,24 +438,41 @@ ...@@ -424,24 +438,41 @@
}; };
return{ return{
curmbFirst: '云鹊店铺', curmbFirst: '云鹊店铺',
isGoods_image:true,
isSpecification_url:true,
title:'', title:'',
typeList: [{ typeList: [{
label: '供货商', label: '药品',
value: '1', value: '1',
}, { }, {
label: '医生小店', label: '药品器械',
value: '2', value: '2',
}, { }, {
label: '小药房', label: '其他',
value: '3', value: '3',
}], }],
formData: { formData: {
headUrl: '', id:'',
name: '', goods_name:'',
introduce: '', goods_description:'',
dynamicFlag: '', goods_image:'',
compainName: '', goods_type:'',
phoneNum: '', medic_common_name:'',
medic_goods_name:'',
size:'',
dosage_id:null,
usage:'',
category_id_level2:'',
otc:'',
approval_number:'',
manufacturer:'',
department:'',
expired_time:'',
specification_url:'',
treat_disease:'',
bar_code:'',
discount_price:'',
stock:1,
}, },
showCropper: false, showCropper: false,
currentOption: { currentOption: {
...@@ -462,12 +493,12 @@ ...@@ -462,12 +493,12 @@
oriUrl: '', // 原图 oriUrl: '', // 原图
}, },
rules: { rules: {
name: [ goods_name: [
{ required: true, message: "请输入圈子名称", trigger: "blur" }, { required: true, message: "请输入商品名称", trigger: "blur" },
{ {
min: 2, // min: 2,
max: 14, // max: 14,
message: "输入长度为2-14的内容，可包含中英文、数字及特殊符号", //message: "输入长度为2-14的内容，可包含中英文、数字及特殊符号",
trigger: "blur" trigger: "blur"
}, },
{ validator: checkProjectStr, trigger: "blur" } { validator: checkProjectStr, trigger: "blur" }
...@@ -482,11 +513,39 @@ ...@@ -482,11 +513,39 @@
}, },
{ validator: checkProjectStr, trigger: "blur" } { validator: checkProjectStr, trigger: "blur" }
], ],
headUrl: [ goods_image: [
{ required: true, message: "请选择圈子头像", trigger: "blur" } { required: true, message: "请上传商品头图", trigger: "blur" }
],
goods_type:[
{ required: true, message: "请选择商品类型", trigger: "change" }
],
medic_common_name:[
{ required: true, message: "请输入商品通用名称", trigger: "blur" }
],
size:[
{ required: true, message: "请输入商品规格", trigger: "blur" }
],
manufacturer:[
{ required: true, message: "请输入生产厂家", trigger: "blur" }
],
approval_number:[
{ required: true, message: "请输入批准文号", trigger: "blur" }
], ],
dosage_id:[
{ required: true, message: "请选择剂型", trigger: "change" }
],
category_id_level2:[
{ required: true, message: "请选择药品类型", trigger: "blur" }
],
otc:[
{ required: true, message: "请选择是否是处方", trigger: "blur" }
],
specification_url:[
{ required: true, message: "请上传药品说明书", trigger: "blur" }
],
dynamicFlag: [ dynamicFlag: [
{ required: true, message: "请选择内容发布权限", trigger: "blur" }, { required: true, message: "请选择内容发布权", trigger: "blur" },
] ]
}, },
imgMouseOver1: false, imgMouseOver1: false,
...@@ -495,11 +554,26 @@ ...@@ -495,11 +554,26 @@
}, },
created() { created() {
vm = this; vm = this;
const id = this.$route.query console.log(this.$route)
this.title = id == 'edit' ? '新增商品' : '编辑商品' const {id} = this.$route.query
this.title = id == 'add' ? '新增商品' : '编辑商品'
}, },
methods: { methods: {
complete() {}, complete() {
let formName = "formData";
this.isGoods_image = !this.formData.goods_image ? false :true;
this.isSpecification_url = !this.formData.specification_url ? false : true
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
//表单校验 //表单校验
submitForm() { submitForm() {
let formName = "formData"; let formName = "formData";
...@@ -672,7 +746,7 @@ ...@@ -672,7 +746,7 @@
.upload-message { .upload-message {
position: absolute; position: absolute;
left: 160px; left: 0;
top: 105px; top: 105px;
font-size: 12px; font-size: 12px;
color: #f56c6c; color: #f56c6c;
...@@ -756,4 +830,37 @@ ...@@ -756,4 +830,37 @@
} }
} }
} }
.stock-com{
width: 158px;
height: 32px;
border:1px solid #dcdfe6;
border-radius: 4px;
overflow: hidden;
.sp{
display: inline-block;
float: left;
}
.sp-c{
line-height: 32px;
width:92px;
text-align: center;
}
.sp-l{
border-right:1px solid #dcdfe6;
}
.sp-r{
border-left:1px solid #dcdfe6;
}
.sp-l,.sp-r{
width: 32px;
text-align: center;
line-height: 32px;
font-size: 13px;
background: #f5f7fa;
cursor: pointer;
}
}
</style> </style>
src/views/goods/goods-manage.vue
浏览文件 @ 3d63519c
...@@ -40,14 +40,19 @@ ...@@ -40,14 +40,19 @@
<el-col :span="6" style="text-align: right"> <el-col :span="6" style="text-align: right">
<el-button type="primary" size="small" @click="batchOpt(3)">批量导入</el-button> <el-button type="primary" size="small" @click="batchOpt(3)">批量导入</el-button>
<el-button type="primary" size="small" @click="createShop">新建单个商品</el-button> <el-button type="primary" size="small" @click="edit('add')">新建单个商品</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;"> <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChange">
<el-table-column prop="id" label="商品ID" min-width="100" align="center"></el-table-column> <el-table-column
<el-table-column prop="name" label="商品名称" min-width="100" align="center"></el-table-column> type="selection"
fixed
width="55">
</el-table-column>
<el-table-column prop="id" label="商品ID" width="120" align="center"></el-table-column>
<el-table-column prop="name" label="商品名称" min-width="140" align="center"></el-table-column>
<el-table-column prop="type" label="商品类型" min-width="100" align="center"> <el-table-column prop="type" label="商品类型" min-width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.type | dynamicFlagStatus }}</span> <span>{{ scope.row.type | dynamicFlagStatus }}</span>
...@@ -67,12 +72,12 @@ ...@@ -67,12 +72,12 @@
<el-table-column prop="num" label="价格" min-width="120" align="center"> <el-table-column prop="num" label="价格" min-width="120" align="center">
111 111
</el-table-column> </el-table-column>
<el-table-column prop="createdTime" label="发布时间" min-width="100" align="center"> <el-table-column prop="createdTime" label="发布时间" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.createdTime | liveDateFilter }}</span> <span>{{ scope.row.createdTime | liveDateFilter }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" min-width="370" align="center"> <el-table-column label="操作" min-width="370" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
...@@ -121,7 +126,7 @@ ...@@ -121,7 +126,7 @@
:before-remove="beforeRemove" :before-remove="beforeRemove"
multiple multiple
:limit="3" :limit="3"
:on-exceed="handleExceed"
:file-list="fileList"> :file-list="fileList">
<i class="el-icon-upload"></i>上传 <i class="el-icon-upload"></i>上传
</el-upload> </el-upload>
...@@ -156,6 +161,7 @@ ...@@ -156,6 +161,7 @@
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}, },
fileList:[],
totalRows: 0, totalRows: 0,
tableData: [ tableData: [
{} {}
...@@ -177,6 +183,12 @@ ...@@ -177,6 +183,12 @@
// this.searchList(); // this.searchList();
}, },
methods: { methods: {
handlePreview(){},
handleRemove(){},
beforeRemove(){},
handleSelectionChange(){
},
//批量 上下架操作 //批量 上下架操作
batchOpt(type){ batchOpt(type){
if(type == 3){//批量导入 if(type == 3){//批量导入
...@@ -184,9 +196,14 @@ ...@@ -184,9 +196,14 @@
} }
}, },
edit(row){ edit(row){
///create-good let url = ''
if(row == 'add'){
url = `/create-good?id=add`
}else{
url = `/create-good?id=${row.id}`
}
this.$router.push({ this.$router.push({
path: `/create-good` path: url
}) })
}, },
...@@ -251,18 +268,6 @@ ...@@ -251,18 +268,6 @@
searchList() { searchList() {
openLoading(this); openLoading(this);
let params = this.searchForm; let params = this.searchForm;
/* getRangeList(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
this.tableData = res.data.circleList;
this.totalRows = res.data.count;
} else {
this.tableData = [];
}
}).catch((error) => {
this.$message.error("请重试");
})*/
}, },
resetForm() { resetForm() {
...@@ -273,95 +278,8 @@ ...@@ -273,95 +278,8 @@
}; };
this.searchList(); this.searchList();
}, },
//新建店铺
createShop() {
this.$router.push({
path: `/create-good`
})
},
//上线
publishRange(row) {
this.$confirm(`确定上线“${row.name}”吗？`, '', {
confirmButtonText: '上线',
cancelButtonText: '取消',
type: 'warning',
customClass: 'range-make-box',
}).then(() => {
// confirm
this.updateStatus(row.id, "30");
}).catch(() => {
// cancel
// this.$message.error("上线失败");
});
},
//下线
unPublishRange(row) {
this.$confirm(`确定下线“${row.name}”吗？`, '', {
confirmButtonText: '下线',
cancelButtonText: '取消',
type: 'warning',
customClass: 'range-make-box',
}).then(() => {
this.updateStatus(row.id, "40");
// confirm
}).catch(() => {
// cancel
});
},
// 更新圈子状态（上线，下线）
updateStatus(id, status){
let params = {"id": id, "status": status};
updateRangeStatus(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
if(status == "40"){
this.$message.success("下线成功");
} else if(status == "30") {
this.$message.success("上线成功");
}else if(status == "50") {
this.$message.success("解散成功");
}
this.searchList();
} else {
if(status == "40"){
this.$message.error("下线失败，请重试");
} else if(status == "30") {
this.$message.error("上线失败，请重试");
}else if(status == "50") {
this.$message.error("解散失败，请重试");
}
}
}).catch((error) => {
if(status == "40"){
this.$message.error("下线失败，请重试");
} else if(status == "30") {
this.$message.error("上线失败，请重试");
}else if(status == "50") {
this.$message.error("解散失败，请重试");
}
})
},
//店铺管理
shopManage(row) {
this.$router.push({
path: '/role-manage?id=' + row.id,
})
},
//编辑
editShop(row) {
let enterType = 2;//1:add 2 edit
this.$router.push({
path: `/create-range?enterType`,
query:{
id:row.id,
enterType:enterType,
roleType: row.roleId
}
})
},
handleSizeChange(val) { handleSizeChange(val) {
this.searchForm.pageSize = val; this.searchForm.pageSize = val;
this.searchForm.pageNo = 1; this.searchForm.pageNo = 1;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或