mp-ui-pc/src/views/business/channel/components/ChangeStore.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" style="max-height: 375px;overflow: auto;margin-top: 30px;">
      <el-form-item label="上级渠道" prop="parentId">
        <el-select v-model="form.parentId" placeholder="请选择上级渠道" style="width: 60%;" 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>
    <div style="width: 100%;text-align: center;">谨慎操作，点击确定后转换，转换完成请到门店列表查看</div>
    <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 { listAllChannel, channelTransform } from "@/api/admin/channel";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },

  data() {
    return {
      loading: false,
      // 上级渠道列表
      channelList: [],
      channelCopyList: [],
      // 表单参数
      form: {
        parentId: null,
      },
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: "请选择门店所属上级渠道", trigger: "change" }
        ],
      },
    };
  },
  mounted() {
    this.getChannelList()
  },
  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;
      }
    },
    saveClick() {
      this.loading = true
      const subForm = this.$refs["form"]
      subForm.validate(valid => {
        if (valid) {
          this.submitForm(this.form);
        } else {
          this.loading = false;
          // 提示第一个error
          this.getFormErrorMessage(subForm);
          return false;
        }
      });
    },

    /**
     * 保存
     */
    submitForm(params) {
      if (this.editId) {
        params.channelId = this.editId;
      }
      channelTransform(params).then(response => {
        this.loading = false
        this.$message.success('转换门店成功')
        this.$emit('saveSuccess')
        this.close()
      }).catch(() => {
        this.loading = false
      });
    },

    /**
     * 关闭窗口
     */
    close() {
      this.$emit("close");
      this.form = {};
    }
  }
};
</script>

<style scoped lang="scss">
.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>