{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\freightTemplate\\city.vue?vue&type=style&index=0&id=d1092626&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\freightTemplate\\city.vue","mtime":1761185179966},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoubW9kYWwgLml0ZW0gew0KICBtYXJnaW4tYm90dG9tOiAyMHB4Ow0KfQ0KLm1vZGFsIC5pdGVtIC5jaXR5IHsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB6LWluZGV4OiA5Ow0KICB0b3A6IDE3cHg7DQogIHdpZHRoOiAxMDAlOw0KICBwYWRkaW5nLXRvcDogMThweDsNCn0NCi5tb2RhbCAuaXRlbSAuY2l0eSAuY2hlY2tCb3ggew0KICB3aWR0aDogOTclOw0KICBwYWRkaW5nOiAxMHB4Ow0KICBib3JkZXI6IDFweCBzb2xpZCAjZWVlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtYXgtaGVpZ2h0OiAxMDBweDsNCiAgb3ZlcmZsb3cteDogaGlkZGVuOw0KICBvdmVyZmxvdy15OiBhdXRvOw0KfQ0KLm1vZGFsIC5pdGVtIC5jaXR5IC5jaGVja0JveCAuYXJyb3cgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIHRvcDogM3B4Ow0KICB3aWR0aDogMDsNCiAgaGVpZ2h0OiAwOw0KICBib3JkZXI6IDhweCBzb2xpZCB0cmFuc3BhcmVudDsNCiAgYm9yZGVyLWJvdHRvbS1jb2xvcjogI2RkZDsNCn0NCi5tb2RhbCAuaXRlbSAuY2l0eSAuY2hlY2tCb3ggLmFycm93OmJlZm9yZSB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYm90dG9tOiAtOHB4Ow0KICByaWdodDogLTdweDsNCiAgY29udGVudDogJyc7DQogIHdpZHRoOiAwOw0KICBoZWlnaHQ6IDA7DQogIGJvcmRlcjogN3B4IHNvbGlkIHRyYW5zcGFyZW50Ow0KICBib3JkZXItYm90dG9tLWNvbG9yOiAjZmZmOw0KfQ0KLm1vZGFsIC5pdGVtIC5jaXR5IC5jaGVja0JveCAuaXRlbW4gew0KICBtYXJnaW4tYm90dG9tOiAxNHB4Ow0KfQ0KLnJhZGlvIHsNCiAgcGFkZGluZzogNXB4IDA7DQogIGZvbnQtc2l6ZTogMTRweCAhaW1wb3J0YW50Ow0KfQ0KLnJlZCB7DQogIGNvbG9yOiAjZmYwMDAwOw0KfQ0KLmVtcHR5IHsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICBmb250LXNpemU6IDEycHg7DQogIG1hcmdpbi1sZWZ0OiAxMHB4Ow0KICBsaW5lLWhlaWdodDogMTlweDsNCiAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItdGV4dC1wcmltYXJ5KTsNCiAgZm9udC13ZWlnaHQ6IDUwMDsNCn0NCg=="},{"version":3,"sources":["city.vue"],"names":[],"mappings":";AAyPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"city.vue","sourceRoot":"src/components/freightTemplate","sourcesContent":["<template>\r\n  <div>\r\n    <el-dialog :visible.sync=\"addressModal\" title=\"选择可配送区域\" width=\"50%\" class=\"modal\">\r\n      <el-row :gutter=\"24\">\r\n        <el-col :xl=\"24\" :lg=\"24\" :md=\"24\" :sm=\"24\" :xs=\"24\" class=\"item\">\r\n          <div class=\"acea-row row-right row-middle\">\r\n            <el-checkbox v-model=\"iSselect\" @change=\"allCheckbox\">全选</el-checkbox>\r\n            <div class=\"empty\" v-db-click @click=\"empty\">清空</div>\r\n          </div>\r\n        </el-col>\r\n      </el-row>\r\n      <el-row :gutter=\"24\" v-loading=\"loading\">\r\n        <el-col\r\n          :xl=\"6\"\r\n          :lg=\"6\"\r\n          :md=\"6\"\r\n          :sm=\"8\"\r\n          :xs=\"6\"\r\n          class=\"item\"\r\n          v-for=\"(item, index) in cityList\"\r\n          :key=\"index\"\r\n          v-if=\"item.isShow\"\r\n        >\r\n          <el-popover placement=\"top-start\" width=\"600\" trigger=\"hover\" :open-delay=\"600\">\r\n            <div>\r\n              <div class=\"city\">\r\n                <div class=\"checkBox\">\r\n                  <div class=\"arrow\"></div>\r\n                  <div>\r\n                    <el-checkbox\r\n                      v-model=\"city.checked\"\r\n                      :label=\"city.name\"\r\n                      @change=\"primary(index, indexn)\"\r\n                      class=\"itemn\"\r\n                      v-for=\"(city, indexn) in item.children\"\r\n                      :key=\"indexn\"\r\n                      v-show=\"city.isShow\"\r\n                      >{{ city.name }}</el-checkbox\r\n                    >\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <el-checkbox slot=\"reference\" v-model=\"item.checked\" :label=\"item.name\" @change=\"checkedClick(index)\">{{\r\n              item.name\r\n            }}</el-checkbox\r\n            ><span class=\"red\">({{ (item.count || 0) + '/' + item.childNum }})</span>\r\n          </el-popover>\r\n        </el-col>\r\n      </el-row>\r\n      <div slot=\"footer\">\r\n        <el-button v-db-click @click=\"close\">取消</el-button>\r\n        <el-button type=\"primary\" v-db-click @click=\"confirm\">确定</el-button>\r\n      </div>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport { templatesCityListApi } from '@/api/setting';\r\nexport default {\r\n  name: 'city',\r\n  props: {\r\n    type: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    selectArr: {\r\n      type: Array,\r\n      default: [],\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      iSselect: false,\r\n      addressModal: false,\r\n      cityList: [],\r\n      activeCity: -1,\r\n      loading: false,\r\n    };\r\n  },\r\n  computed: {},\r\n  methods: {\r\n    enter(index) {\r\n      this.activeCity = index;\r\n    },\r\n    leave() {\r\n      this.activeCity = null;\r\n    },\r\n    getCityList() {\r\n      this.loading = true;\r\n      templatesCityListApi().then((res) => {\r\n        this.loading = false;\r\n        this.selectArr = [];\r\n        res.data.forEach((el, index, arr) => {\r\n          el.isShow = true;\r\n          el.children.forEach((child, j) => {\r\n            child.isShow = true;\r\n            if (this.selectArr.length > 0) {\r\n              this.selectArr.forEach((sel, sindex) => {\r\n                sel.children.forEach((sitem, sj) => {\r\n                  if (child.city_id == sitem.city_id) {\r\n                    child.isShow = false;\r\n                  }\r\n                });\r\n              });\r\n            }\r\n          });\r\n        });\r\n        res.data.forEach((el, index, arr) => {\r\n          let num = 0;\r\n          let oldNum = 0;\r\n          el.children.forEach((child, j) => {\r\n            if (!child.isShow) {\r\n              num++;\r\n            } else {\r\n              oldNum++;\r\n            }\r\n          });\r\n          if (num == el.children.length) {\r\n            el.isShow = false;\r\n          }\r\n          el.childNum = oldNum;\r\n        });\r\n        this.cityList = res.data;\r\n        this.iSselect = false;\r\n      });\r\n    },\r\n    /**\r\n     * 全选或者反选\r\n     * @param checked\r\n     */\r\n    allCheckbox: function () {\r\n      let that = this,\r\n        checked = this.iSselect;\r\n      that.cityList.forEach(function (item, key) {\r\n        that.$set(that.cityList[key], 'checked', checked);\r\n        if (checked) {\r\n          that.$set(that.cityList[key], 'count', that.cityList[key].children.length);\r\n        } else {\r\n          that.$set(that.cityList[key], 'count', 0);\r\n        }\r\n        that.cityList[key].children.forEach(function (val, k) {\r\n          that.$set(that.cityList[key].children[k], 'checked', checked);\r\n        });\r\n      });\r\n      // this.render();\r\n    },\r\n    // 清空；\r\n    empty() {\r\n      let that = this;\r\n      that.cityList.forEach(function (item, key) {\r\n        that.$set(that.cityList[key], 'checked', false);\r\n        that.cityList[key].children.forEach(function (val, k) {\r\n          that.$set(that.cityList[key].children[k], 'checked', false);\r\n        });\r\n        that.$set(that.cityList[key], 'count', 0);\r\n      });\r\n      this.iSselect = false;\r\n    },\r\n    /**\r\n     * 点击省\r\n     * @param index\r\n     */\r\n    checkedClick: function (index) {\r\n      let that = this;\r\n      if (that.cityList[index].checked) {\r\n        that.$set(that.cityList[index], 'count', that.cityList[index].childNum);\r\n        that.cityList[index].children.forEach(function (item, key) {\r\n          that.$set(that.cityList[index].children[key], 'checked', true);\r\n        });\r\n      } else {\r\n        that.$set(that.cityList[index], 'count', 0);\r\n        that.$set(that.cityList[index], 'checked', false);\r\n        that.cityList[index].children.forEach(function (item, key) {\r\n          that.$set(that.cityList[index].children[key], 'checked', false);\r\n        });\r\n        that.iSselect = false;\r\n      }\r\n      // this.render();\r\n    },\r\n    /**\r\n     * 点击市区\r\n     * @param index\r\n     * @param ind\r\n     */\r\n    primary: function (index, ind) {\r\n      let checked = false,\r\n        count = 0;\r\n      this.cityList[index].children.forEach(function (item, key) {\r\n        if (item.checked) {\r\n          checked = true;\r\n          count++;\r\n        }\r\n      });\r\n      this.$set(this.cityList[index], 'count', count);\r\n      this.$set(this.cityList[index], 'checked', checked);\r\n      // this.render();\r\n    },\r\n    // 确定;\r\n    confirm() {\r\n      let that = this;\r\n      // 被选中的省市；\r\n      let selectList = [];\r\n      that.cityList.forEach(function (item, key) {\r\n        let data = {};\r\n        if (item.checked) {\r\n          data = {\r\n            name: item.name,\r\n            city_id: item.city_id,\r\n            children: [],\r\n          };\r\n        }\r\n        that.cityList[key].children.forEach(function (i, k) {\r\n          if (i.checked) {\r\n            data.children.push({\r\n              city_id: i.city_id,\r\n            });\r\n          }\r\n        });\r\n        if (data.city_id !== undefined) {\r\n          selectList.push(data);\r\n        }\r\n      });\r\n      if (selectList.length === 0) {\r\n        return that.$message.error('至少选择一个省份或者城市');\r\n      } else {\r\n        this.$emit('selectCity', selectList, this.type);\r\n        that.addressModal = false;\r\n        this.cityList = [];\r\n      }\r\n      // parent.selectCity(selectList,type);\r\n      // var index = parent.layer.getFrameIndex(window.name);\r\n      // parent.layer.close(index);\r\n    },\r\n    close() {\r\n      this.addressModal = false;\r\n      this.cityList = [];\r\n    },\r\n  },\r\n  mounted() {\r\n    // this.getCityList();\r\n  },\r\n  beforeDestroy() {},\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.modal .item {\r\n  margin-bottom: 20px;\r\n}\r\n.modal .item .city {\r\n  position: absolute;\r\n  z-index: 9;\r\n  top: 17px;\r\n  width: 100%;\r\n  padding-top: 18px;\r\n}\r\n.modal .item .city .checkBox {\r\n  width: 97%;\r\n  padding: 10px;\r\n  border: 1px solid #eee;\r\n  background-color: #fff;\r\n  max-height: 100px;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n}\r\n.modal .item .city .checkBox .arrow {\r\n  position: absolute;\r\n  top: 3px;\r\n  width: 0;\r\n  height: 0;\r\n  border: 8px solid transparent;\r\n  border-bottom-color: #ddd;\r\n}\r\n.modal .item .city .checkBox .arrow:before {\r\n  position: absolute;\r\n  bottom: -8px;\r\n  right: -7px;\r\n  content: '';\r\n  width: 0;\r\n  height: 0;\r\n  border: 7px solid transparent;\r\n  border-bottom-color: #fff;\r\n}\r\n.modal .item .city .checkBox .itemn {\r\n  margin-bottom: 14px;\r\n}\r\n.radio {\r\n  padding: 5px 0;\r\n  font-size: 14px !important;\r\n}\r\n.red {\r\n  color: #ff0000;\r\n}\r\n.empty {\r\n  cursor: pointer;\r\n  font-size: 12px;\r\n  margin-left: 10px;\r\n  line-height: 19px;\r\n  color: var(--prev-color-text-primary);\r\n  font-weight: 500;\r\n}\r\n</style>\r\n"]}]}