| 1 |
- {"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"]}]}
|
