school-manage/src/views/app/shop/addEdit.vue

<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer
      :title="title"
      v-model="visible"
      width="720"
      draggable
      :mask-closable="type == '0'"
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">


        <Form
          ref="form"
          :model="form"
          :rules="formValidate"
          label-position="top"
        >
          <Row :gutter="32" >
            <Col span="12">
              <FormItem label="店铺名称" prop="shopName">
                <Input
                  v-model="form.shopName"
                  autocomplete="off"
                  :maxlength="16"
                />
              </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="店铺图标" class="form-noheight">
                  <upload-pic-input v-model="form.shopIcon"></upload-pic-input>
                </FormItem>
            </Col>
          </Row>
           <Row :gutter="32">
              <Col span="12">
               <FormItem label="所属区域" class="form-noheight">
                   <shopArea-tree-choose
                     @on-change="handleSelectShopAreaTree"
                     ref="shopAreaTree"
                   ></shopArea-tree-choose>
                 </FormItem>
              </Col>
               <Col span="12">
                   <FormItem label="店铺分类" class="form-noheight">
                       <dict dict="shopType" v-model="form.shopType" transfer />
                   </FormItem>
               </Col>
            </Row>
            <Row :gutter="32">
                <Col span="24">
                    <FormItem label="店铺详细地址" prop="shopAddress">
                        <Input v-model="form.shopAddress" />
                    </FormItem>
                </Col>
            </Row>
			<Row :gutter="32" >
			  <Col span="12">
			    <FormItem label="联系方式" prop="contactPhone">
			      <Input
			        v-model="form.contactPhone"
			        autocomplete="off"
			        :maxlength="16"
			      />
			    </FormItem>
			  </Col>
			  <Col span="12">
				  <FormItem label="副标题" prop="contactPhone">
				    <Input
				      v-model="form.subtitle"
				      autocomplete="off"
				      :maxlength="16"
				    />
				  </FormItem>
			  </Col>
			</Row>
			<Row :gutter="32" >
			  <Col span="12">
			    <FormItem label="支付宝账号" prop="contactPhone">
			      <Input
			        v-model="form.aliAccount"
			        autocomplete="off"
			        :maxlength="16"
			      />
			    </FormItem>
			  </Col>
			  <Col span="12">
				  <FormItem label="支付宝户名" prop="contactPhone">
				    <Input
				      v-model="form.aliName"
				      autocomplete="off"
				      :maxlength="16"
				    />
				  </FormItem>
			  </Col>
			</Row>
          <Row :gutter="32">

            <Col span="24">
              <FormItem label="备注">
                <Input type="textarea" v-model="form.remark" :rows="4" />
              </FormItem>
            </Col>
          </Row>
          <Divider />



        </Form>
      </div>
      <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import {getUsersByRoleName,getDictDataByType} from "@/api/index";
import {
  validateUsername,
  validateMobile,
  validatePassword,
} from "@/libs/validate";
import shopAreaTreeChoose from "@/views/my-components/hiver/shopArea-tree-choose";
import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
import SetPassword from "@/views/my-components/hiver/set-password";
import dict from "@/views/my-components/hiver/dict";
import {addShop, editShop} from "@/api/app";
export default {
  name: "addEdit",
  components: {
    shopAreaTreeChoose,
    uploadPicInput,
    SetPassword,
    dict,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      roleList: [],
      roleList2: [],
      shopAreaList: [],
      businessDistrictLevelList: [],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        address: [],
      },
      formValidate: {
        // 表单验证规则
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          { validator: validateUsername, trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址" },
          { type: "email", message: "邮箱格式不正确" },
        ],
      },
    };
  },
  methods: {
    init() {
      this.getRoleList();
    },
    getRoleList() {
      getUsersByRoleName("ROLE_OWNER").then((res) => {
        if (res.success) {
          this.roleList = res.result;
        }
      });
      getUsersByRoleName("ROLE_MANAGER").then((res) => {
        if (res.success) {
          this.roleList2 = res.result;
        }
      });
      getDictDataByType("mallMuseumType").then((res) => {
          if (res.success) {
            this.businessDistrictLevelList = res.result;
          }
       });
       getDictDataByType("mallRegion").then((res) => {
         if (res.success) {
           this.shopAreaList = res.result;
         }
      });
        getDictDataByType("shopType").then((res) => {
            if (res.success) {
                this.shopType = res.result;
            }
        });
    },
    handleSelectShopAreaTree(v) {
      this.form.shopArea = v;
    },
    changePass(v, grade, strength) {
      this.form.passStrength = strength;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (typeof this.form.chargeTime == "object") {
            this.form.chargeTime = this.format(this.form.chargeTime, "yyyy-MM-dd");
          }
          if (typeof this.form.startTime == "object") {
            this.form.startTime = this.format(this.form.startTime, "yyyy-MM-dd");
          }
          if (typeof this.form.endTime == "object") {
            this.form.endTime = this.format(this.form.endTime, "yyyy-MM-dd");
          }
          debugger;
          if(this.form.users == '' || this.form.users == null){
              delete this.form.users;
          }
          // 处理商品分类的名称
          if(this.form.shopType != '' && this.form.shopType != null){
              this.shopType.forEach(item => {
                  debugger;
                  if (this.form.shopType == item.value) {
                      this.form.shopTypeTitle = item.title;
                  }
              });
          }
		  this.form.shopMangerId =  this.form.shopOwnerId
          if (this.type == "1") {
            // 编辑
            this.submitLoading = true;
            editShop(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            this.submitLoading = true;
            addShop(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          }
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑店铺";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加店铺";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "店铺详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
        // 地址
        if (data.address) {
          data.address = data.address.split(",");
        } else {
          data.address = [];
        }
        // 商圈
         this.$refs.shopAreaTree.setData(data.shopArea, data.shopAreaTitle);
        // 回显
        this.form = data;
      } else {
        // 添加
        //this.$refs.shopAreaTree.setData("", "");
        this.form = {
          /*type: 0,
          sex: "",
          address: [],*/
        };
      }
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>