hemall.terabimsoft.com.cn/plugins/embargoed-area/views/widget/tool/embargoedArea.js

define({
  name: "embargoedArea",
  template: `
        <div id='re_content'>
        <div class="con">
            <div class="setting">
                <el-form ref="form" label-width="15%">
                    <div class="block">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>禁运区设置</b>
                        </div>
                        <el-form-item label="不配送区域">
                            <div style="font-size:12px;font-weight:600;line-height:18px;margin-right: 15px">
                                {{areas}}
                            </div>
                            <el-button size="small" @click="openVisible()">选择区域</el-button>
                            <div style="color:#737373;font-size:12px;">只针对平台自营商品订单，不包括供应商、门店</div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="请选择地区" :visible.sync="centerDialogVisible" center v-if="showVisible"
                  :before-close="beforeClose">
            <el-tree
                    v-loading="loading"
                    :props="props"
                    node-key="id"
                    :default-checked-keys="area_ids"
                    :default-expanded-keys="province_ids"
                    show-checkbox
                    lazy
                    @check-change="checkAreas"
                    ref="addressTree"
                    :data="treeData"
                    :load="loadNode"
                    style="height:500px;overflow:auto"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="beforeClose">取 消</el-button>
                <el-button type="primary" @click="saveAreas">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  `,
  data() {
    return {
      activeName: 'one',
      forms: {},
      area_ids: [],
      province_ids: [],
      areas: '',
      areaIds: '',
      provinceIds: '',
      chooseAreas: [],
      chooseAreaIds: [],
      chooseProvinceIds: [],
      centerDialogVisible: false,
      showVisible: false,
      loading: false,
      treeData: [],
      props: {
          label: 'areaname',
          children: 'children',
          isLeaf: 'isLeaf'
      },
    };
  },
  style: `
  <style>
  .panel {
      margin-bottom: 10px !important;
      padding-left: 20px;
      border-radius: 10px;
  }

  .panel .active a {
      background-color: #29ba9c !important;
      border-radius: 18px !important;
      color: #fff;
  }

  .panel a {
      border: none !important;
      background-color: #fff !important;
  }

  .content {
      background: #eff3f6;
      padding: 10px !important;
  }

  .con {
      padding-bottom: 20px;
      position: relative;
      border-radius: 8px;
      min-height: 100vh;
      background-color: #fff;
  }

  .con .setting .block {
      padding: 10px;
      background-color: #fff;
      border-radius: 8px;
  }

  .con .setting .block .title {
      font-size: 18px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
  }

  .confirm-btn {
      width: calc(100% - 266px);
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 10px;
      line-height: 63px;
      background-color: #ffffff;
      box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
      background-color: #fff;
      text-align: center;
  }

  b {
      font-size: 14px;
  }
  `,
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      if (JSON.stringify(this.form) !== '[]') {
          this.area_ids = this.form.area_ids;
          this.province_ids = this.form.province_ids;
          this.areas = this.form.areas;
      }
    },
    openVisible() {
      this.centerDialogVisible = true;
      this.showVisible = true;
      if(this.area_ids){
        this.area_ids.forEach((item, index) => {
          this.area_ids[index] = Number(item)
        });
      }
    },
    loadNode(node, resolve) {
      this.loading = true;
      if (!node.data.id) {
        //省份
        node.data.id = 0;
        this.$http.get(this.http_url + "area.list&parent_id=0").then(response => {
            response.data.data.forEach(function (province) {
                province.isLeaf = false;
            });
            resolve(response.data.data);

            this.loading = false;
        }, response => {
            console.log(response);
        });
      } else {
        //城市
        this.$http.get(this.http_url + "area.list&parent_id=" + node.data.id).then(response => {
            //城市没有子节点
            response.data.data.forEach(function (city) {
                city.isLeaf = true;
            })
            resolve(response.data.data);
            // 载入数据后,刷新已选中
            this.loading = false;
        }, response => {
            console.log(response);
        });
      }
    },
    checkAreas(node, checked, children) {
      if (node.isLeaf) {
        return;
      }
      if (checked) {
        if (!this.province_ids) {
            this.province_ids = [];
        }
        this.province_ids.push(node.id)
      }
    },
    saveAreas() {
      let areas = [];
      let area_ids = [];
      let province_ids = [];
      this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
        if (node.level == 1) {
            province_ids.push(node.id);
        } else if (node.level == 2) {
            area_ids.push(node.id);
            areas.push(node.areaname)
        }
      });
      this.$refs.addressTree.getHalfCheckedNodes().forEach(function (node) {
        if (node.level == 1) {
            province_ids.push(node.id);
        }
      });
      this.province_ids = province_ids;
      this.area_ids = area_ids;
      this.areas = areas.join(";");
      this.areaIds = area_ids.join(";");
      this.provinceIds = province_ids.join(";");
      this.centerDialogVisible = false
      this.showVisible = false;
    },
    beforeClose() {
      this.centerDialogVisible = false;
      this.showVisible = false;
    },
    handleClose(area) {
      this.forms.areas.splice(this.forms.areas.indexOf(area), 1);
    },
    validate(){
      return {
        area_ids:this.area_ids ? this.area_ids : [],
        province_ids:this.province_ids ? this.province_ids : [],
        areas: this.areas ? this.areas : "",
      }
    }
  },
  props: {
    form: {
      default() {
        return {};
      },
    },
    http_url:{
      type:String,
      default() {
        return "";
      },
    }
  },
});