You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
505 lines
15 KiB
505 lines
15 KiB
<!-- -->
|
|
<template>
|
|
<div class="addFactory wrapper_1200">
|
|
<div class="router-tips">
|
|
<nuxt-link to="/">首页></nuxt-link>
|
|
<nuxt-link :to="{ path: '/user', query: { types: 0 } }">个人中心></nuxt-link>
|
|
<span>{{ isEdit ? "修改" : "新增" }}</span>
|
|
</div>
|
|
|
|
<div class="cont">
|
|
<div class="title">上传资质</div>
|
|
<div class="form">
|
|
<el-form
|
|
:model="zzform"
|
|
label-position="top"
|
|
:rules="rules"
|
|
ref="zzform"
|
|
label-width="100px"
|
|
class="demo-ruleForm"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="名称" prop="title">
|
|
<el-input
|
|
v-model="zzform.title"
|
|
placeholder="请填写公司或店铺名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="编号" prop="store_code">
|
|
<el-input v-model="zzform.store_code" placeholder="请填写编号"></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item label="店铺类型" prop="store_type">
|
|
<el-input
|
|
v-model="zzform.store_type"
|
|
placeholder="请填写店铺类型"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系人" prop="contacts">
|
|
<el-input v-model="zzform.contacts" placeholder="请填写联系人"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话号码" prop="phone">
|
|
<el-input v-model="zzform.phone" placeholder="请填写电话号码"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电子邮箱">
|
|
<el-input v-model="zzform.email" placeholder="请填写电子邮箱"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="店铺地址">
|
|
<el-input
|
|
style="margin-top: 10px"
|
|
v-model="zzform.address"
|
|
placeholder="详细地址，如四川省成都市天府三街99号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="备注">
|
|
<el-input type="textarea" :rows="3" placeholder="请填写内容" v-model="zzform.remarks"></el-input>
|
|
</el-form-item>-->
|
|
<el-form-item label="所属地" prop="district_id">
|
|
<el-select
|
|
style="width: 30%; margin-right: 16px"
|
|
v-model="zzform.province_id"
|
|
placeholder="省/直辖市"
|
|
@change="change($event, 1)"
|
|
>
|
|
<el-option
|
|
v-for="item in provinceList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<el-select
|
|
style="width: 30%; margin-right: 16px"
|
|
v-model="zzform.city_id"
|
|
@change="change($event, 2)"
|
|
placeholder="市/区"
|
|
>
|
|
<el-option
|
|
v-for="item in cityList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select
|
|
style="width: 30%"
|
|
v-model="zzform.district_id"
|
|
placeholder="区/县"
|
|
>
|
|
<el-option
|
|
v-for="item in districtList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="营业执照或医疗机构许可证：请上传营业执照"
|
|
prop="license"
|
|
>
|
|
<UploadImage1
|
|
@input="uploadSccess($event, 'license')"
|
|
:value="zzform.license"
|
|
:limit="2"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="药品经营许可证：请上传营业执照" prop="drugs_license">
|
|
<UploadImage1
|
|
@input="uploadSccess($event, 'drugs_license')"
|
|
:value="zzform.drugs_license"
|
|
:limit="2"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
|
|
</el-form-item>
|
|
<el-form-item label="法人身份证：请上传法人身份证" prop="card_images">
|
|
<UploadImage1
|
|
:limit="2"
|
|
@input="uploadSccess($event, 'card_images')"
|
|
:value="zzform.card_images"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
|
|
</el-form-item>
|
|
<el-form-item label="法人委托书：请上传法人委托书" prop="trust_book_images">
|
|
<UploadImage1
|
|
:limit="2"
|
|
@input="uploadSccess($event, 'trust_book_images')"
|
|
:value="zzform.trust_book_images"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
|
|
</el-form-item>
|
|
<el-form-item label="发票信息：请上传发票信息">
|
|
<UploadImage1
|
|
@input="uploadSccess($event, 'invoice_images')"
|
|
:value="zzform.invoice_images"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 290px;
|
|
margin-top: 200px;
|
|
"
|
|
>
|
|
<el-button size="small" @click="clickBack" type="info">返回</el-button>
|
|
|
|
<el-button size="small" type="primary" @click="submitForm('zzform')"
|
|
>完成</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
import areaList from "@/mixins/areaList";
|
|
export default {
|
|
name: "addFactory",
|
|
auth: false,
|
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {},
|
|
mixins: [areaList],
|
|
data() {
|
|
//这里存放数据
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
isEdit: false,
|
|
provinceList: [], //省列表
|
|
cityList: [], //市列表
|
|
districtList: [], //区列表
|
|
zzform: {
|
|
title: "", //店铺名称
|
|
store_code: "", //店铺编号
|
|
store_type: "", //店铺类型
|
|
contacts: "", //联系人
|
|
phone: "", //电话号码
|
|
email: "", //电子邮箱
|
|
province_id: "", //省份id
|
|
district_id: "", //区县id
|
|
city_id: "", //城市id
|
|
address: "", //地址
|
|
license: "", //营业执照
|
|
drugs_license: "", //药品经营许可证
|
|
card_images: "", //身份证正反面照片
|
|
trust_book_images: "", //法人委托书
|
|
invoice_images: "", //发票信息
|
|
// remarks: "" //备注
|
|
},
|
|
rules: {
|
|
title: {
|
|
required: true,
|
|
message: "请填写公司或店铺名称",
|
|
trigger: "blur",
|
|
},
|
|
contacts: {
|
|
required: true,
|
|
message: "请填写联系人",
|
|
trigger: "blur",
|
|
},
|
|
phone: {
|
|
required: true,
|
|
message: "请填写电话号码",
|
|
trigger: "blur",
|
|
},
|
|
|
|
store_code: {
|
|
required: true,
|
|
message: "请填写店铺编号",
|
|
trigger: "blur",
|
|
},
|
|
store_type: {
|
|
required: false,
|
|
message: "请填写店铺类型",
|
|
trigger: "blur",
|
|
},
|
|
|
|
province_id: {
|
|
required: true,
|
|
message: "请选择所属地",
|
|
trigger: "change",
|
|
},
|
|
district_id: {
|
|
required: true,
|
|
message: "请选择所属地",
|
|
trigger: "change",
|
|
},
|
|
city_id: {
|
|
required: true,
|
|
message: "请选择所属地",
|
|
trigger: "change",
|
|
},
|
|
license: {
|
|
required: true,
|
|
message: "请上传营业执照",
|
|
trigger: "change",
|
|
},
|
|
drugs_license: {
|
|
required: true,
|
|
message: "请上传药品经营许可证",
|
|
trigger: "change",
|
|
},
|
|
card_images: {
|
|
required: true,
|
|
message: "请上传身份证正反面照片",
|
|
trigger: "change",
|
|
},
|
|
trust_book_images: {
|
|
required: false,
|
|
message: "请上传法人委托书",
|
|
trigger: "change",
|
|
},
|
|
invoice_images: {
|
|
required: false,
|
|
message: "请上传发票信息",
|
|
trigger: "change",
|
|
},
|
|
},
|
|
};
|
|
},
|
|
async asyncData({ app }) {
|
|
let [provinceList] = await Promise.all([
|
|
// 省市区
|
|
app.$axios.post("/address/lists"),
|
|
]);
|
|
return {
|
|
provinceList: provinceList.data,
|
|
};
|
|
},
|
|
//监听属性 类似于data概念
|
|
computed: {},
|
|
//监控data中的数据变化
|
|
watch: {},
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
created() {
|
|
if (this.$route.query.isEdit) {
|
|
this.isEdit = JSON.parse(this.$route.query.isEdit);
|
|
console.log(this.isEdit);
|
|
this.getData(this.$route.query.id);
|
|
}
|
|
},
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
mounted() {},
|
|
//方法集合
|
|
methods: {
|
|
// 修改时根据id查询药店信息
|
|
getData(id) {
|
|
let obj = {
|
|
id,
|
|
};
|
|
this.$axios
|
|
.post(`/member/getStoreInfo`, obj)
|
|
.then((res) => {
|
|
this.zzform = res.data;
|
|
console.log(this.zzform);
|
|
this.getAreaData(res.data.province_id, 1);
|
|
this.getAreaData(res.data.city_id, 2);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
submitForm(zzform) {
|
|
this.$refs[zzform].validate((valid) => {
|
|
if (valid) {
|
|
// 修改
|
|
if (this.isEdit) {
|
|
let obj = { ...this.zzform };
|
|
this.$axios
|
|
.post(`/member/editStore`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
this.$router.push({ path: `/user` });
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err.message);
|
|
});
|
|
}
|
|
//新增
|
|
else {
|
|
let obj = { ...this.zzform };
|
|
this.$axios
|
|
.post(`/member/addStore`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
this.$router.push({ path: `/user` });
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
uploadSccess(e, key) {
|
|
this.zzform[key] = e;
|
|
this.$refs.zzform.validateField(key);
|
|
},
|
|
clickBack() {
|
|
this.$router.go(-1);
|
|
},
|
|
// 获取市区
|
|
change(pid, i) {
|
|
console.log(pid, i);
|
|
this.$axios
|
|
.post("/address/lists", {
|
|
pid,
|
|
})
|
|
.then((res) => {
|
|
if (i == 1) {
|
|
this.cityList = res.data;
|
|
this.zzform.city_id = "";
|
|
this.zzform.district_id = "";
|
|
}
|
|
if (i == 2) {
|
|
this.districtList = res.data;
|
|
this.zzform.district_id = "";
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// @import"~assets/theme/element-variables.scss";
|
|
|
|
::v-deep {
|
|
.el-input__inner {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
.el-form-item__content {
|
|
line-height: 32px;
|
|
}
|
|
.el-form-item__label {
|
|
line-height: 32px;
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
.el-form-item__label {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.addFactory {
|
|
.router-tips {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
font-size: 14px;
|
|
a {
|
|
color: #333;
|
|
}
|
|
span {
|
|
color: #999999;
|
|
}
|
|
}
|
|
.cont {
|
|
// width: 1200px;
|
|
// height: 1128px;
|
|
padding: 20px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
.el-form-item {
|
|
width: 70%;
|
|
margin-top: 10px;
|
|
.upload {
|
|
width: 290px;
|
|
height: 111px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dddddd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 22px;
|
|
height: 20px;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
p {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999;
|
|
margin-top: -10px;
|
|
}
|
|
}
|
|
.title {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 19px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|