mp-ui-pc/src/views/business/salesite/components/AddCreate.vue

<template>
  <el-dialog title="编辑门店名称" :visible.sync="dialogVisible" width="750px" :append-to-body="true" :before-close="close" :destroy-on-close="true" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="max-height: 375px;overflow: auto;">
      <el-form-item label="上级渠道" prop="parentId" style="width: 60%;margin: 40px 0">
        <el-select
          v-model="form.parentId"
          placeholder="请选择上级渠道"
          style="width: 100%;"
          filterable
          clearable
          :filter-method="dataFilter"
        >
          <el-option
            v-for="(item) in channelList"
            :key="item.channelId"
            :label="item.name"
            :value="item.channelId">
            <div>
              <span style="float: left;">{{item.name}} </span>
              <span style="float: right;">{{item.mobile}}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店名称" prop="name" style="width: 60%;margin: 40px 0">
        <el-input v-model="form.name" placeholder="例如xxxx店, 对用户可见" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile" style="width: 60%;margin: 40px 0">
        <el-input
          v-model="form.mobile"
          placeholder="请输入手机号码"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="关闭分佣:">
        <el-switch v-model="form.commFlag" :active-value="1" :inactive-value="0" />
        <div class="tip">开启后，购买线上票不分佣（渠道，门店，推广员）</div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :disabled="loading" @click="saveClick">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateSaleSite, getSaleSiteDetail } from "@/api/admin/salesite";
import { listAllChannel } from "@/api/admin/channel";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },
  data() {
    return {
      loading: false,
      // 表单参数
      form: {
        name: "",
        commFlag: 0,
        mobile: "",
        parentId: null,
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入门店名称", trigger: "blur" }
        ],
      },
      //招商推广宣传图
      picture: [],
      // 上级渠道列表
      channelList:[],
    };
  },
  mounted() {
    this.getChannelList()
  },
  created() {
    // 是编辑
    if (this.editId) {
      this.getDetail();
    }
  },
  methods: {
    // 获取上级渠道下拉列表
    getChannelList(){
      listAllChannel().then(response => {
         this.channelList = response.data || [];
         this.channelCopyList = response.data || [];
      });
    },
    dataFilter(val) {
      if (val) { //val存在
        this.channelList = this.channelCopyList.filter((item) => {
          if (!!~item.mobile.indexOf(val) || !!~item.mobile.toUpperCase().indexOf(val.toUpperCase())
                 || !!~item.name.indexOf(val) || !!~item.name.indexOf(val)) {
             return true
          }
        })
      } else { //val为空时，还原数组
        this.channelList = this.channelCopyList;
      }
    },
    getDetail() {
      this.loading = true;
      getSaleSiteDetail(this.editId).then(res => {
        this.form.name = res.data.name
        this.form.commFlag = res.data.commFlag
        this.form.mobile = res.data.mobile
        this.form.parentId = res.data.parentId
        this.loading = false
      }).catch(() => {
        this.loading = false;
      });
    },
    //确定修改
    saveClick() {
      this.loading = true
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitForm(this.form);
        } else {
          this.loading = false;
          this.$message.error('门店名称不能为空')
          return false;
        }
      });
    },
    //保存
    submitForm(params) {
      if (this.editId) {
        params.channelId = this.editId;
      }
      updateSaleSite(params).then(response => {
        this.loading = false
        this.$message.success('编辑成功')
        this.$emit('saveSuccess')
        this.close()
      }).catch(() => {
        this.loading = false
      });
    },
    //关闭
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style scoped lang="scss">
.tip {
  font-size: 12px;
  color: #999;
}
.tag {
  margin-right: 15px;
  width: 90px;
  text-align: center;
  cursor: pointer;
}

.tag-select {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.cover-content-item {
  width: 220px;
  float: left;
  position: relative;
  .cover-img {
    width: 200px;
    height: 100px;
  }
  .cover-mark {
    position: absolute;
    top: 0px;
    right: 28px;
    z-index: 1;
    color: red;
    cursor: pointer;
    visibility: hidden;
  }
  .select {
    visibility: visible !important;
  }
}

.dialog-footer {
  text-align: center;
}
</style>

<style lang="scss">
.ygp-form-items {
  .el-form-item {
    padding: 0 5px;
  }
  .el-form-item__label {
    line-height: 1.2;
    padding-bottom: 8px;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
  }

  .el-form-item__error {
    position: relative;
    top: auto;
    left: auto;
  }

  .el-form-item.is-desc_text {
    .el-form-item__label {
      display: none;
    }
  }
}
</style>