leaser_front/src/views/setting/system/data-dictionary/components/contract-card.vue

<template>
  <a-card title="合同管理">
    <a-spin style="display: block" :loading="loading">
      <div
        v-if="contractTagsList && contractTagsList.length"
        class="project_label_wrap"
      >
        <div class="flex_center_between">
          <div class="title_wrap">
            <h4>合同类型（标签类）</h4>
            <a-checkbox
              :model-value="
                checkedLabelId.length === contractTagsList.length &&
                contractTagsList.length > 0
              "
              @change="onCheckAllLabelChange"
              >全选</a-checkbox
            >
          </div>
          <a-button type="text" @click="handleAddLabel"
            ><icon-plus />新增</a-button
          >
          <labelFormModal
            v-model:visible="showLabelModal"
            :create-api="createContractTags"
            :update-api="updateContractTags"
            :del-api="delContractTags"
            :title="isEdit ? '编辑合同类型字典' : '新增合同类型字典'"
            :record="currentLabelFormInfo"
            :is-edit="isEdit"
            @submitted="getAllContractTagListData"
          />
        </div>
        <ul class="ul_wrap">
          <li
            v-for="item in contractTagsList"
            :key="item.id"
            style="margin: 5px 30px 0 0"
          >
            <a-checkbox
              :model-value="checkedLabelId.includes(item.id)"
              @change="(val) => onProjectTypeCheckChange(item, val)"
            >
              {{ item.name }}
              <span
                class="circle"
                :style="{
                  borderColor: item.color,
                  backgroundColor: item.color,
                }"
              ></span>
              <icon-edit
                v-if="item.type === 2"
                class="edit_icon"
                @click.stop.prevent="handleEditLabel(item, $event)"
              />
            </a-checkbox>
          </li>
        </ul>
      </div>
    </a-spin>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    getAllContractTagsList,
    checkContractTags,
    checkAllContractTags,
    createContractTags,
    updateContractTags,
    delContractTags,
  } from '@/api/dictionary';
  import { ProjectTypeChecked } from '@/types/comm';
  import useLoading from '@/hooks/loading';
  import { Message } from '@arco-design/web-vue';
  import labelFormModal from './label-form-modal.vue';

  const contractTagsList = ref<any>([]);
  const checkedLabelId = ref<number[]>([]);
  const { loading, setLoading } = useLoading(true);
  const showLabelModal = ref<boolean>(false);
  const isEdit = ref<boolean>(false);
  const currentLabelFormInfo = ref(null);

  const checkAllProjectTypeData = async (checked: boolean) => {
    try {
      const params = { is_check: (checked ? 1 : 0) as ProjectTypeChecked };
      const { code, message } = await checkAllContractTags(params);
      if (code === 200) {
        Message.success(message);
      }
    } catch (error) {
      // console.error(error);
    }
  };
  const checkProjectTypeData = async (params: {
    id: number;
    is_check: ProjectTypeChecked;
  }) => {
    try {
      const { code, message } = await checkContractTags(params);
      if (code === 200) {
        Message.success(message);
      }
    } catch (error) {
      // console.error(error);
    }
  };
  const onCheckAllLabelChange = (checked: boolean) => {
    if (checked) {
      // 全选
      checkedLabelId.value = contractTagsList.value.map((item) => item.id);
    } else {
      // 取消全选
      checkedLabelId.value = [];
    }
    checkAllProjectTypeData(checked);
  };
  const onProjectTypeCheckChange = (item, checked) => {
    if (checked) {
      if (!checkedLabelId.value.includes(item.id)) {
        checkedLabelId.value.push(item.id);
      }
    } else {
      checkedLabelId.value = checkedLabelId.value.filter(
        (id) => id !== item.id
      );
    }
    checkProjectTypeData({ id: item.id, is_check: checked ? 1 : 0 });
  };
  const getAllContractTagListData = async () => {
    try {
      setLoading(true);
      const { code, data } = await getAllContractTagsList();
      if (code === 200 && data) {
        contractTagsList.value = data?.contractTagsSettingList;
        if (contractTagsList.value?.length === 0) return;
        checkedLabelId.value = contractTagsList.value
          .filter((i) => i.isCheck === 1)
          .map((i) => i.id);
      }
    } catch (error) {
      // console.error(error);
    } finally {
      setLoading(false);
    }
  };
  const handleAddLabel = () => {
    showLabelModal.value = true;
    isEdit.value = false;
    currentLabelFormInfo.value = null;
  };
  const handleEditLabel = (item, event) => {
    if (event) event.preventDefault();
    showLabelModal.value = true;
    isEdit.value = true;
    currentLabelFormInfo.value = item;
  };

  onMounted(async () => {
    await getAllContractTagListData();
  });
</script>

<style lang="less" scoped>
  .project_label_wrap {
    .title_wrap {
      display: flex;
      align-items: center;
    }

    .circle {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin-left: 4px;
      vertical-align: middle;
    }

    .edit_icon {
      margin-left: 5px;
    }

    .ul_wrap {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }
  }
</style>