|
@@ -0,0 +1,493 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <el-dialog :close-on-click-modal="false"
|
|
|
|
|
+ :visible.sync="addressView"
|
|
|
|
|
+ append-to-body
|
|
|
|
|
+ class="modal"
|
|
|
|
|
+ title="选择城市" width="950px">
|
|
|
|
|
+ <el-row :gutter="24" type="flex">
|
|
|
|
|
+ <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="item">
|
|
|
|
|
+ <div class="check-btn">
|
|
|
|
|
+ <el-checkbox v-model="iSselect" @change="allCheckbox">全选</el-checkbox>
|
|
|
|
|
+ <div class="empty" @click="empty">清空</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row :gutter="24" :loading="loading" >
|
|
|
|
|
+ <el-col :xl="6" :lg="6" :md="6" :sm="8" :xs="6" class="item" v-for="(item,index) in cityList" :key="index">
|
|
|
|
|
+ <div @mouseenter="enter(index)" @mouseleave="leave()" v-if="item.level==1">
|
|
|
|
|
+ <el-checkbox
|
|
|
|
|
+ v-model="item.checked"
|
|
|
|
|
+ :label="item.cityName"
|
|
|
|
|
+ :disabled="item.disabled"
|
|
|
|
|
+ @change="checkedClick(index)"
|
|
|
|
|
+ :class="{ 'disabled-checkbox': item.disabled }"
|
|
|
|
|
+ >{{item.cityName}}</el-checkbox>
|
|
|
|
|
+ <div class="city" v-show="activeCity===index">
|
|
|
|
|
+ <div class="checkBox">
|
|
|
|
|
+ <div class="arrow"></div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-checkbox
|
|
|
|
|
+ v-model="subitem.checked"
|
|
|
|
|
+ :label="subitem.cityName"
|
|
|
|
|
+ :disabled="subitem.disabled"
|
|
|
|
|
+ @change="primary(index,subindex)"
|
|
|
|
|
+ class="itemn"
|
|
|
|
|
+ v-for="(subitem,subindex) in item.children"
|
|
|
|
|
+ :key="subindex"
|
|
|
|
|
+ :class="{ 'disabled-checkbox': subitem.disabled }"
|
|
|
|
|
+ >{{subitem.cityName}}</el-checkbox>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <div slot="footer">
|
|
|
|
|
+ <el-button @click="close">取消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="confirm">确定</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import {getAllList} from "@/api/hisStore/city";
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'CityZm',
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ default: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ selectedCities: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: () => []
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ iSselect: false,
|
|
|
|
|
+ addressView: false,
|
|
|
|
|
+ cityList: [],
|
|
|
|
|
+ activeCity: -1,
|
|
|
|
|
+ loading: false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ enter(index) {
|
|
|
|
|
+ this.activeCity = index;
|
|
|
|
|
+ },
|
|
|
|
|
+ leave() {
|
|
|
|
|
+ this.activeCity = null;
|
|
|
|
|
+ },
|
|
|
|
|
+ getCityList() {
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ getAllList().then(res => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ console.log(res.data)
|
|
|
|
|
+ var data = res.data;
|
|
|
|
|
+ this.cityList = data.filter(item => item.level === 1)
|
|
|
|
|
+
|
|
|
|
|
+ this.cityList.forEach((item, index, arr) => {
|
|
|
|
|
+ // 加载市的数据
|
|
|
|
|
+ var subData = data.filter(subitem => subitem.parentId === item.cityId && subitem.level === 2)
|
|
|
|
|
+ console.log(subData)
|
|
|
|
|
+ item.children = subData;
|
|
|
|
|
+
|
|
|
|
|
+ // 加载县的数据到每个市下
|
|
|
|
|
+ item.children.forEach((city, cityIndex) => {
|
|
|
|
|
+ var countyData = data.filter(county => county.parentId === city.cityId && county.level === 3);
|
|
|
|
|
+ if (countyData && countyData.length > 0) {
|
|
|
|
|
+ city.children = countyData;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 标记已选择的城市
|
|
|
|
|
+ this.markSelectedCities(item);
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 标记已选择的城市为禁用状态
|
|
|
|
|
+ markSelectedCities(province) {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ if (!that.selectedCities || that.selectedCities.length === 0) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否选择了整个省(children为空数组或不存在)
|
|
|
|
|
+ let selectedProvince = that.selectedCities.find(city => {
|
|
|
|
|
+ if (city.cityId === province.cityId) {
|
|
|
|
|
+ // 如果没有children属性,或者children是空数组,说明选择了整个省
|
|
|
|
|
+ return !city.children || city.children.length === 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ return false;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (selectedProvince) {
|
|
|
|
|
+ // 整个省已选择,禁用省和所有市
|
|
|
|
|
+ that.$set(province, 'disabled', true);
|
|
|
|
|
+ if (province.children && province.children.length > 0) {
|
|
|
|
|
+ province.children.forEach((city, cityIndex) => {
|
|
|
|
|
+ that.$set(province.children[cityIndex], 'disabled', true);
|
|
|
|
|
+ // 如果市下有县,也禁用所有县
|
|
|
|
|
+ if (city.children && city.children.length > 0) {
|
|
|
|
|
+ city.children.forEach((county, countyIndex) => {
|
|
|
|
|
+ that.$set(province.children[cityIndex].children[countyIndex], 'disabled', true);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 检查是否有部分市被选择
|
|
|
|
|
+ let selectedCityMap = new Map(); // 存储已选择的市及其县信息
|
|
|
|
|
+ that.selectedCities.forEach(selectedCity => {
|
|
|
|
|
+ if (selectedCity.cityId === province.cityId && selectedCity.children && selectedCity.children.length > 0) {
|
|
|
|
|
+ // 该省下有选择的市
|
|
|
|
|
+ selectedCity.children.forEach(child => {
|
|
|
|
|
+ if (!selectedCityMap.has(child.cityId)) {
|
|
|
|
|
+ selectedCityMap.set(child.cityId, new Set());
|
|
|
|
|
+ }
|
|
|
|
|
+ // 如果市下有选择的县,记录县的ID
|
|
|
|
|
+ if (child.children && child.children.length > 0) {
|
|
|
|
|
+ child.children.forEach(county => {
|
|
|
|
|
+ selectedCityMap.get(child.cityId).add(county.cityId);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (selectedCityMap.size > 0) {
|
|
|
|
|
+ // 检查该省下所有市是否都被选择
|
|
|
|
|
+ let allCitiesSelected = true;
|
|
|
|
|
+ if (province.children && province.children.length > 0) {
|
|
|
|
|
+ province.children.forEach(city => {
|
|
|
|
|
+ if (!selectedCityMap.has(city.cityId)) {
|
|
|
|
|
+ allCitiesSelected = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ allCitiesSelected = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 如果所有市都被选择,禁用整个省
|
|
|
|
|
+ if (allCitiesSelected) {
|
|
|
|
|
+ that.$set(province, 'disabled', true);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 标记已选择的市为禁用,并检查市下的县
|
|
|
|
|
+ if (province.children && province.children.length > 0) {
|
|
|
|
|
+ province.children.forEach((city, cityIndex) => {
|
|
|
|
|
+ if (selectedCityMap.has(city.cityId)) {
|
|
|
|
|
+ // 该市已被选择
|
|
|
|
|
+ let selectedCountyIds = selectedCityMap.get(city.cityId);
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否选择了整个市(没有选择具体的县,或者县列表为空)
|
|
|
|
|
+ let citySelectedData = null;
|
|
|
|
|
+ that.selectedCities.forEach(selectedCity => {
|
|
|
|
|
+ if (selectedCity.cityId === province.cityId && selectedCity.children) {
|
|
|
|
|
+ let foundCity = selectedCity.children.find(c => c.cityId === city.cityId);
|
|
|
|
|
+ if (foundCity && (!foundCity.children || foundCity.children.length === 0)) {
|
|
|
|
|
+ citySelectedData = foundCity;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (citySelectedData) {
|
|
|
|
|
+ // 选择了整个市,禁用该市和所有县
|
|
|
|
|
+ that.$set(province.children[cityIndex], 'disabled', true);
|
|
|
|
|
+ if (city.children && city.children.length > 0) {
|
|
|
|
|
+ city.children.forEach((county, countyIndex) => {
|
|
|
|
|
+ that.$set(province.children[cityIndex].children[countyIndex], 'disabled', true);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ } else if (city.children && city.children.length > 0 && selectedCountyIds.size > 0) {
|
|
|
|
|
+ // 检查该市下所有县是否都被选择
|
|
|
|
|
+ let allCountiesSelected = true;
|
|
|
|
|
+ city.children.forEach(county => {
|
|
|
|
|
+ if (!selectedCountyIds.has(county.cityId)) {
|
|
|
|
|
+ allCountiesSelected = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 如果所有县都被选择,禁用该市
|
|
|
|
|
+ if (allCountiesSelected) {
|
|
|
|
|
+ that.$set(province.children[cityIndex], 'disabled', true);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 标记已选择的县为禁用
|
|
|
|
|
+ city.children.forEach((county, countyIndex) => {
|
|
|
|
|
+ if (selectedCountyIds.has(county.cityId)) {
|
|
|
|
|
+ that.$set(province.children[cityIndex].children[countyIndex], 'disabled', true);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 选择了整个市(没有县的数据或没有选择县),禁用该市
|
|
|
|
|
+ that.$set(province.children[cityIndex], 'disabled', true);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 全选或者反选
|
|
|
|
|
+ * @param checked
|
|
|
|
|
+ */
|
|
|
|
|
+ allCheckbox: function () {
|
|
|
|
|
+ let that = this, checked = this.iSselect;
|
|
|
|
|
+ that.cityList.forEach(function (item, key) {
|
|
|
|
|
+ // 跳过已禁用的省
|
|
|
|
|
+ if (item.disabled) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ that.$set(that.cityList[key], 'checked', checked);
|
|
|
|
|
+ if (checked) {
|
|
|
|
|
+ // 只计算未禁用的市的数量
|
|
|
|
|
+ let enabledCount = that.cityList[key].children.filter(city => !city.disabled).length;
|
|
|
|
|
+ that.$set(that.cityList[key], 'count', enabledCount);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ that.$set(that.cityList[key], 'count', 0);
|
|
|
|
|
+ }
|
|
|
|
|
+ that.cityList[key].children.forEach(function (val, k) {
|
|
|
|
|
+ // 跳过已禁用的市
|
|
|
|
|
+ if (!val.disabled) {
|
|
|
|
|
+ that.$set(that.cityList[key].children[k], 'checked', checked);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 清空;
|
|
|
|
|
+ empty() {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ that.cityList.forEach(function (item, key) {
|
|
|
|
|
+ // 跳过已禁用的省
|
|
|
|
|
+ if (item.disabled) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ that.$set(that.cityList[key], 'checked', false);
|
|
|
|
|
+ that.cityList[key].children.forEach(function (val, k) {
|
|
|
|
|
+ // 跳过已禁用的市
|
|
|
|
|
+ if (!val.disabled) {
|
|
|
|
|
+ that.$set(that.cityList[key].children[k], 'checked', false);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ that.$set(that.cityList[key], 'count', 0);
|
|
|
|
|
+ });
|
|
|
|
|
+ this.iSselect = false;
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 点击省
|
|
|
|
|
+ * @param index
|
|
|
|
|
+ */
|
|
|
|
|
+ checkedClick: function (index) {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ // 如果省被禁用,不允许操作
|
|
|
|
|
+ if (that.cityList[index].disabled) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (that.cityList[index].checked) {
|
|
|
|
|
+ // 只选择未禁用的市
|
|
|
|
|
+ let enabledCount = 0;
|
|
|
|
|
+ that.cityList[index].children.forEach(function (item, key) {
|
|
|
|
|
+ if (!item.disabled) {
|
|
|
|
|
+ that.$set(that.cityList[index].children[key], 'checked', true);
|
|
|
|
|
+ enabledCount++;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ that.$set(that.cityList[index], 'count', enabledCount);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ that.$set(that.cityList[index], 'count', 0);
|
|
|
|
|
+ that.$set(that.cityList[index], 'checked', false);
|
|
|
|
|
+ that.cityList[index].children.forEach(function (item, key) {
|
|
|
|
|
+ // 只取消未禁用的市的选中状态
|
|
|
|
|
+ if (!item.disabled) {
|
|
|
|
|
+ that.$set(that.cityList[index].children[key], 'checked', false);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ that.iSselect = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 点击市区
|
|
|
|
|
+ * @param index
|
|
|
|
|
+ * @param ind
|
|
|
|
|
+ */
|
|
|
|
|
+ primary: function (index, ind) {
|
|
|
|
|
+ // 如果市被禁用,不允许操作
|
|
|
|
|
+ if (this.cityList[index].children[ind].disabled) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ let checked = false, count = 0;
|
|
|
|
|
+ this.cityList[index].children.forEach(function (item, key) {
|
|
|
|
|
+ console.log("item:" + item.checked)
|
|
|
|
|
+ if (item.checked) {
|
|
|
|
|
+ checked = true;
|
|
|
|
|
+ count++;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ this.$set(this.cityList[index], 'count', count);
|
|
|
|
|
+ this.$set(this.cityList[index], 'checked', checked);
|
|
|
|
|
+ },
|
|
|
|
|
+ // 确定;
|
|
|
|
|
+ confirm() {
|
|
|
|
|
+ let that = this;
|
|
|
|
|
+ // 被选中的省市;
|
|
|
|
|
+ let selectList = [];
|
|
|
|
|
+ that.cityList.forEach(function (item, key) {
|
|
|
|
|
+ // 跳过已禁用的省
|
|
|
|
|
+ if (item.disabled) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ let data = {};
|
|
|
|
|
+ if (item.checked) {
|
|
|
|
|
+ data = {
|
|
|
|
|
+ name: item.cityName,
|
|
|
|
|
+ cityId: item.cityId,
|
|
|
|
|
+ children: []
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ that.cityList[key].children.forEach(function (i, k) {
|
|
|
|
|
+ // 只添加未禁用且选中的市
|
|
|
|
|
+ if (i.checked && !i.disabled) {
|
|
|
|
|
+ let cityData = {
|
|
|
|
|
+ cityId: i.cityId
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 如果市下有县,检查是否有选中的县
|
|
|
|
|
+ if (i.children && i.children.length > 0) {
|
|
|
|
|
+ let selectedCounties = [];
|
|
|
|
|
+ i.children.forEach(function (county, countyIndex) {
|
|
|
|
|
+ if (county.checked && !county.disabled) {
|
|
|
|
|
+ selectedCounties.push({
|
|
|
|
|
+ cityId: county.cityId
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 如果有选中的县,添加到市的children中
|
|
|
|
|
+ if (selectedCounties.length > 0) {
|
|
|
|
|
+ cityData.children = selectedCounties;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ data.children.push(cityData);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ if (data.cityId !== undefined) {
|
|
|
|
|
+ selectList.push(data);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(selectList);
|
|
|
|
|
+ if (selectList.length === 0) {
|
|
|
|
|
+ return this.$message({
|
|
|
|
|
+ message: '至少选择一个省份或者城市',
|
|
|
|
|
+ type: 'error'
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$emit('selectCity', selectList, this.type);
|
|
|
|
|
+ that.addressView = false;
|
|
|
|
|
+ this.cityList = []
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ close() {
|
|
|
|
|
+ this.addressView = false;
|
|
|
|
|
+ this.cityList = [];
|
|
|
|
|
+ // 重置选中状态
|
|
|
|
|
+ this.iSselect = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+
|
|
|
|
|
+.modal .item {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.modal .item .city {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ top: 17px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding-top: 18px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.modal .item .city .checkBox {
|
|
|
|
|
+ width: 97%;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border: 1px solid #eee;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ max-height: 100px;
|
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.modal .item .city .checkBox .arrow {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 3px;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border: 8px solid transparent;
|
|
|
|
|
+ border-bottom-color: #ddd;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.modal .item .city .checkBox .arrow:before {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: -8px;
|
|
|
|
|
+ right: -7px;
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border: 7px solid transparent;
|
|
|
|
|
+ border-bottom-color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.modal .item .city .checkBox .itemn {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.radio {
|
|
|
|
|
+ padding: 5px 0;
|
|
|
|
|
+ font-size: 14px !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.red {
|
|
|
|
|
+ color: #ff0000;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.empty {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ margin-left: 10px
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.check-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 禁用状态的复选框样式 */
|
|
|
|
|
+.disabled-checkbox {
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ cursor: not-allowed !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.disabled-checkbox /deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
|
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
|
+ border-color: #e4e7ed;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.disabled-checkbox /deep/ .el-checkbox__input.is-disabled + .el-checkbox__label {
|
|
|
|
|
+ color: #c0c4cc;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|