push

lib/component/form/checkbox/checkbox-allgroup.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="all-group">
+    <!-- 样式修改 -->
+    <div class="message-list">
+      <a-checkbox
+        v-model:checked="checkAll"
+        :indeterminate="indeterminate"
+        @change="onCheckAllChange"
+        :disabled="promptWord.checked"
+      >
+        全选
+      </a-checkbox>
+    </div>
+    <div class="warp" v-if="options.length">
+      <a-checkbox-group
+        v-model:value="checkedList"
+        :options="options"
+        :disabled="promptWord.checked"
+      >
+        <slot></slot>
+      </a-checkbox-group>
+      <!-- <ns-checkbox-group v-model:value="checkedList" :options="options" /> -->
+    </div>
+    <div class="no-warp" v-if="!options.length">
+      <ul class="prompt-information">
+        <ns-icon class="icon" name="account1" size="25" style="margin-right: 5px" />
+        <li>暂无数据, 请先维护</li
+        ><li @click="jumpMaintenanceInformation()">{{ promptWord.maintenanceInformation }}</li></ul
+      >
+    </div>
+    <p class="remark-prompt">{{ promptWord.message }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, toRefs, reactive, watch, computed, ref } from 'vue';
+  import { http } from '/nerv-lib/util/http';
+  import { useRouter } from 'vue-router';
+  export default defineComponent({
+    name: 'NsCheckboxAllGroup',
+    props: {
+      api: String,
+      field: String,
+      title: String,
+      message: String,
+      maintenanceInformation: String, //没有数据的情况下的维护信息
+      route: String, //维护信息跳转的路由
+      optionsName: Array,
+      resultField: String,
+      checked: String,
+      options: Array
+    },
+    setup(props) {
+      const options = ref([]); //创建options接受请求回来的值
+      const state = reactive({
+        indeterminate: false,
+        checkAll: false,
+        checkedList: [],
+      });
+      const router = useRouter();
+      // 获取标题和备注信息
+      const promptWord = computed(() => {
+        return props;
+      });
+      //   获取后端的区域
+      const getData = () => {
+        options.value = [];
+        if(props.options){
+          options.value= props.options
+        }
+        http.get(props.api).then((res) => {
+          if (promptWord.value.resultField == 'data') {
+            res.data.forEach((element) => {
+              element['label'] = element[promptWord.value.optionsName[0]];
+              element['value'] = element[promptWord.value.optionsName[1]];
+            });
+            options.value = res.data;
+          } else {
+            res.data.data.forEach((element) => {
+              element['label'] = element[promptWord.value.optionsName[0]];
+              element['value'] = element[promptWord.value.optionsName[1]];
+            });
+            options.value = res.data.data;
+          }
+        });
+      };
+      const jumpMaintenanceInformation = () => {
+        router.push(props.route);
+      };
+      getData();
+      // 全选的时候会触发这个方法
+      const onCheckAllChange = (e: any) => {
+        state.checkedList = [];
+        if (e.target.checked) {
+          (state.indeterminate = false),
+            options.value.forEach((item) => {
+              state.checkedList.push(item['value']);
+            });
+        }
+        state.indeterminate = false;
+      };
+      //   监听选中的数据
+      watch(
+        () => state.checkedList,
+        (val) => {
+          state.indeterminate = !!val.length && val.length < options.value.length;
+          state.checkAll = val.length === options.value.length;
+        }
+      );
+
+      return {
+        ...toRefs(state),
+        onCheckAllChange,
+        promptWord,
+        options,
+        jumpMaintenanceInformation,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .all-group {
+    // margin-left: 22.22%;
+  }
+  .warp {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #dcdfe2;
+    background: #f8f9fc;
+  }
+  .no-warp {
+    width: 100%;
+    height: 100px;
+    border: 1px solid #dcdfe2;
+    background: #f8f9fc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    .prompt-information {
+      list-style: none;
+      display: flex;
+      padding-left: 7px;
+      //   position: absolute;
+      //   left: 50%;
+      //   top: 40%;
+      li:nth-of-type(1) {
+        color: #828282;
+      }
+      li:nth-of-type(2) {
+        color: #6865ea;
+      }
+    }
+  }
+  .message-list {
+    display: flex;
+  }
+  .message-list p {
+    margin-right: 5px;
+    color: #606060;
+  }
+  .ant-checkbox-group {
+    margin: 22px 18px 26px !important;
+  }
+
+  :deep(.ant-checkbox-group-item) {
+    margin-right: 110px !important;
+  }
+
+  .remark-prompt {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 22px;
+
+    color: #c1c1c1;
+    margin-top: 7px;
+  }
+</style>