tenant-Platform/src/views/quoteConfig/agreement/agreementIndex.vue

<template>
  <div>
    <PageMain class="vh100">
      <SearchForm :fields="fields" :formInline="formInline" :onSearch="agreementQuery" :onReset="resetForm" />
      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
        :pageInfo="pageInfo" @getList="getList" @selectionChange="selectionChange">
        <template v-slot:table-title-btn>
          <RouterLink :to="{ name: 'AgreementAdd' }">
            <el-button type="primary">
              添加协议
              <template #icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </el-button>
          </RouterLink>
          <el-dropdown placement="bottom-start">
            <el-button> 批量管理<el-icon>
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchDel">删除</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchdisable">禁用</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchenable">启用</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-slot:operation="scope">
          <el-button type="primary" link @click="agreemenUpdate(scope.operationData)"> 详情
          </el-button>
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">
              更 多
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="enable(scope.operationData.id)">启用</el-dropdown-item>
                <el-dropdown-item @click="disable(scope.operationData.id)">禁用</el-dropdown-item>
                <el-dropdown-item @click="del(scope.operationData.id)">删除</el-dropdown-item>
                <el-dropdown-item @click="agreemenCopy">复制协议</el-dropdown-item>
                <el-dropdown-item @click="batchAuthorization(scope.operationData.id)">协议授权</el-dropdown-item>
                <el-dropdown-item @click="agreemenUpdate(scope.operationData)">费用管理</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-slot:search="scope">
          {{ scope.slotData.label }}
        </template>
      </ComplexTable>
    </PageMain>
    <auth-Drawer :Drawer="agreementAuthDrawer" @cancel=" agreementAuthDrawer = false" @save="DrawerSave"
      @query="Drawerquery" :deptlist="deptauthList" :checkedKeys="checkedKeys" :checkedIds="checkedIds"></auth-Drawer>


  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { RouterLink, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import authDrawer from "./components/agreementAuth.vue";
import api from '@/api';
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
onBeforeMount(async () => {
  await loadDicts(['agreement_type', 'valid_status', 'is_enable', 'with_tax']);//获取多个字典
  findpage();//列表数据
  getDeptTree();
  agreement_type.value = getDict('agreement_type');//协议类型
  valid_status.value = getDict('valid_status');//生效状态
  is_enable.value = getDict('is_enable');//协议状态
  with_tax.value = getDict('with_tax')//是否含税
});

const parentIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
const tableData = ref([
]);

const sysUpAndDownList = ref<string[]>([])//选中id
const provinceoptions = ref<string[]>([])//省市区回显数据
const deptOptions = ref()//机构数据
const agreement_type = ref();
const valid_status = ref();
const is_enable = ref();
const with_tax = ref();
const router = useRouter();
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 100,
});
const formInline = reactive({
  searchValue: '',//协议信息
  deptId: "",//归属
  companyId: '',//保险公司id
  agreementType: '',//协议类型
  validStatus: "",//有效状态
  isEnable: "",//协议状态
  withTax: "",
  dockingPerson: "",
  attributionName: "",
  takeStartDate: "",
  takeEndDate: "",
  loseStartDate: "",
  loseEndDate: "",
})

//表格字段数据
const fields = ref([
  { label: "协议信息", model: "searchValue", type: "input", placeholder: "输入代码，名称，简称查找" },
  {
    label: "协议归属", model: "deptId", type: "cascader", options: deptOptions, props: parentIdprops, onChange: (value: any) => {
      formInline.deptId = value[value.length - 1];
    }
  },
  {
    label: "保险公司", model: "companyId", type: "select", placeholder: "选择保险公司",
  },
  {
    label: "协议类型", model: "agreementType", type: "select", placeholder: "选择保险公司", options: agreement_type,
  },
  {
    label: "生效状态", model: "validStatus", type: "select", placeholder: "选择生效状态", options: valid_status,
  },
  {
    label: "协议状态", model: "isEnable", type: "select", placeholder: "选择协议状态", options: is_enable,
  },
  {
    label: "是否含税结算", model: "withTax", type: "select", placeholder: "请选择", options: with_tax,
  },
  {
    label: "对接人", model: "dockingPerson", type: "input", placeholder: "输入姓名，手机号查找"
  },
  {
    label: "出单账号", model: "attributionName", type: "input", placeholder: "选择出单账号"
  },
  {
    label: "生效时间", model: "takeStartDate", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    onChange: (value: any) => {
      formInline.takeStartDate = value[0];
      formInline.takeEndDate = value[1];
    }
  },
  {
    label: "失效时间", model: "loseStartDate", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    onChange: (value: any) => {
      formInline.loseStartDate = value[0];
      formInline.loseEndDate = value[1];
    }
  },
]);

//数据查询
function findpage() {
  api.agreementApi.agreementList({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
    } else {
    }
  });
}
const columns = [
  { prop: "agreementCode", label: "协议编号", width: '200', },
  {
    prop: "agreementTitle", label: "协议名称", width: '200',
  },
  { prop: "agreementAbbreviation", label: "协议简称", width: '120', },
  {
    prop: "deptName", label: "归属", width: '120',
  },
  {
    prop: "agreementType", label: "协议类型", width: '200', formatter: (row: any) => {
      let name = getDict('agreement_type').find(val => val.value == row.agreementType).label
      return name
    }
  },
  {
    prop: "isEnable", label: "协议状态", width: '100',
    component: "Tag",
    formatter: (row: any) => {
      let name = getDict('is_enable').find(val => val.value == row.isEnable).label
      if (name) {
        return { type: 'primary', text: name };
      } else {
        return { type: 'primary', text: name };
      }
    }

  },
  {
    prop: "validStatus", label: "生效状态", width: '120', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('valid_status').find(val => val.value == row.validStatus).label
      if (name) {
        return { type: 'danger', text: name };
      } else {
        return { type: 'danger', text: name };
      }
    }
  },
  {
    prop: "withTax", label: "是否含税结算", width: '180',
    formatter: (row: any) => {
      let name = getDict('with_tax').find(val => val.value == row.withTax).label
      return name
    }
  },
  {
    prop: "moneyTime", label: "结算周期", width: '120',
    formatter: (row: any) => {
      return 'T' + row.moneyTime
    }
  },
  { prop: "attributionId", label: "出单账号", width: '120', },
  { prop: "company", label: "保险公司", width: '200' },
  { prop: "dockingPerson", label: "对接人", width: '200' },
  { prop: "custodianId", label: "管理人", width: '200' },
  { prop: "startDate", label: "生效时间", width: '200' },
  { prop: "endDate", label: "失效时间", width: '200' },
  { prop: "createTime", label: "添加时间", width: '200' },
  { prop: "createBy", label: "添加人", width: '200' },
  { prop: "fileName", label: "协议文件", width: '200' },
];
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};
//机构授权
const agreementAuthDrawer = ref(false)//授权弹窗
const deptauthList = ref([]);//授权机构列表
const checkedKeys = ref<string[]>([])//授权机构回显数据
const checkedIds = ref<string[]>([])//授权机构回显id
//授权机构检索
const Drawerquery = (name: any) => {
  agreementAuth(name)
}
//授权保存
const DrawerSave = (list: any) => {
  api.agreementApi.authSave({ deptIds: list, id: agreementId.value }).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      agreementAuthDrawer.value = false;
    } else {
    }
  });
}
//协议授权
const agreementAuth = (deptName: any) => {
  let name = typeof deptName === 'string' ? deptName : '';
  api.agreementApi.agreementdeptTree(agreementId.value, name).then((res: any) => {
    if (res.code == '200') {
      agreementAuthDrawer.value = true;
      deptauthList.value = res.data;
      checkedKeys.value = getUncheckedIds(res.data);
      checkedIds.value = getUncheckedIds(res.data);
    } else {
    }
  });
}
// 定义递归函数
function getUncheckedIds(data: any[]): string[] {
  let ids: string[] = [];

  data.forEach((item) => {
    if (item.isCheck === 1) {
      ids.push(item.id); // 如果 isCheck 为 0，添加 id
    }
    if (item.children && item.children.length > 0) {
      // 如果有子项，递归调用
      ids = ids.concat(getUncheckedIds(item.children));
    }
  });

  return ids;
}

function agreemenUpdate(item: any) {
  router.push({
    name: 'AgreementDetails',
    query: {
      id: item.id
    }
  })
}
//多选事件
const selectionChange = (val: any) => {
  sysUpAndDownList.value = val;
}
//协议授权
const agreementId = ref()
const batchAuthorization = (value: string) => {
  agreementId.value = value;
  api.agreementApi.agreementdeptTree(value, '').then((res: any) => {
    if (res.code == '200') {
      agreementAuthDrawer.value = true;
      deptauthList.value = res.data;
      checkedKeys.value = getUncheckedIds(res.data);
      checkedIds.value = getUncheckedIds(res.data);
    } else {
    }
  });

}
//复制协议
const agreemenCopy = () => {

}
//禁用
const disable = (value: string) => {
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      sysUpAndDown('1', [value]);
    })
}
//启用
const enable = (value: string) => {
  sysUpAndDown('0', [value]);
}
const del = (value: string) => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.agreementDelete([value]).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.push({
            name: 'reload',
          })
        }
      });
    })
}
//批量删除
const batchDel = () => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.agreementDelete(sysUpAndDownList.value).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.push({
            name: 'reload',
          })
        }
      });
    })

}
//批量禁用
const batchdisable = () => {
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(async () => {
      await sysUpAndDown('1', undefined);
    })
    .catch(() => {
    })


}
//批量启用
const batchenable = async () => {
  await sysUpAndDown('0', undefined);
}
const agreementQuery = () => {
  findpage();
}
const sysUpAndDown = async (type: string, list?: string[]) => {
  await api.agreementApi.sysUpAndDown({ ids: list ? list : sysUpAndDownList.value, opType: type }).then((res: any) => {
    if (res.code == '200') {
      findpage();
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//添加子机构
const subOrganizationAdd = (code: string) => {
  router.push({
    name: 'OrganizationDeptAdd',
    query: {
      code: code
    }
  })
}
const resetForm = () => {
  formInline.searchValue = '';
  provinceoptions.value = [];
  findpage();
}
const getDeptTree = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code == '200') {
      deptOptions.value = res.data;
    } else {
    }
  });
}
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

:deep(.el-dropdown-link) {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--el-color-primary);
  cursor: pointer;
}

.el-inputs {
  width: 100% !important;
}
</style>