digital-medicine-front/src/views/dgtmedicine/member/index.vue

<template>
  <div class="p-3">
    <div class="bg-fff flex1 ov-hd d-flex flex-cln" v-show="showSearch">
      <div class="pd-16 border-bottom">
        <div class="f-s-20 c-333 f-w-7 mb-10">会员列表</div>
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
          <el-form-item label="会员名称" prop="cpyName">
            <el-input v-model="queryParams.cpyName" placeholder="搜会员名称关键字" clearable style="width: 180px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="负责人" prop="contact">
            <el-input v-model="queryParams.contact" placeholder="搜单位负责人" clearable style="width: 180px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="负责人电话" prop="contactTel">
            <el-input v-model="queryParams.contactTel" placeholder="搜负责人联系电话" clearable style="width: 180px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="入会时间段" prop="dateRange">
            <div class="d-flex" style="width: 180px">
              <DateRange v-model="queryParams.dateRange" v-model:start-date="queryParams.payStartDate"
                v-model:end-date="queryParams.payEndDate"></DateRange>
            </div>
          </el-form-item>
          <el-form-item label="有效期状态" prop="vipEnable">
            <el-select style="width: 140px" v-model="queryParams.vipEnable" clearable placeholder="搜有效期状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="有效" value="1"></el-option>
              <el-option label="过期" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="d-flex flex1 ov-hd flex-cln pd-16">
        <searchTabs :list="memberLevelCountList" v-model="queryParams.vipLevel" keyLabel="name" @change="handleQuery"
          keyCount="num" keyValue="type"></searchTabs>
        <div class="pd-8"></div>
        <div class="flex1 ov-hd">
          <vxe-table :loading="loading" border :data="memberList" min-height="0" max-height="100%">
            <vxe-column title="会员名称" align="center" field="cpyName" width="220" :formatter="colNoData" />
            <vxe-column title="会员级别" align="center" field="vipLevel" width="120">
              <template #default="scope">
                <dict-tag :value="scope.row.vipLevel" :options="vip_level" />
              </template>
            </vxe-column>
            <vxe-column title="单位负责人" align="center" field="contact" width="100" :formatter="colNoData" />
            <vxe-column title="负责人联系电话" align="center" field="contactTel" wmin-width="100" :formatter="colNoData" />
            <vxe-column title="企业地址" wmin-width="100">
              <template #default="{ row }">
                {{ (row.adcdCodeName || '') + (row.address || '') || '-' }}
              </template>
            </vxe-column>
            <vxe-column title="有效期状态" width="100" :formatter="colNoData">
              <template #default="{ row }">
                {{ +row?.vipEnable ? '有效' : '过期' }}
              </template>
            </vxe-column>
            <vxe-column title="有效期至" align="center" field="endDate" width="140" :formatter="colNoData" />
            <vxe-column title="入会时间" align="center" field="startDate" wmin-width="100" :formatter="colNoData" />
            <vxe-column title="操作" width="330" align="center" fixed="right" class-name="small-padding fixed-width">
              <template #default="{ row }">
                <el-button text type="primary" @click="memberDetail(row)">详情</el-button>
                <span></span>
                <el-button text style="color: #0079fe">修改有效期</el-button>
                <span></span>
                <el-button text style="color: #0079fe">修改级别</el-button>
                <span></span>
                <el-button text type="danger" @click="deleteItem(row)">删除</el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script setup name="Member" lang="ts">
import { listMember, delMember, addMember, updateMember, countLevelMember } from '@/api/dgtmedicine/member/index';
import { approvalMember } from '@/api/dgtmedicine/approvalLog/index';
import { MemberVO, MemberQuery, MemberForm, MemberLevelCountVO } from '@/api/dgtmedicine/member/types';
import { ApprovalLogQuery, ApprovalLogForm } from '@/api/dgtmedicine/approvalLog/types';
import { colNoData } from '@/utils/noData';
import { DateRange, searchTabs } from '@/views/models/index';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, vip_level } = toRefs<any>(proxy?.useDict('cpy_res_status', 'vip_level'));
const memberList = ref<MemberVO[]>([]);
const memberLevelCountList = ref<MemberLevelCountVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();

const initFormData: MemberForm = {
  id: undefined,
  cpyName: '',
  legalPersonName: '',
  legalPersonPhone: '',
  legalPersonPosition: '',
  legalPersonIdFront: '',
  legalPersonIdBack: '',
  companyCertificate: '',
  email: '',
  department: '',
  totalAssets: '',
  introduction: '',
  regType: '',
  membershipPurpose: '',
  plantingInfo: [],
  vipLevel: '',
  startDate: '',
  endDate: '',
  reviewStatus: '',
  reviewMsg: '',
  reviewBy: '',
  reviewTime: '',
  partnerId: '',
  cpyBusType: '',
  applyLevel: ''
};
const data = reactive<any>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    vipLevel: '',
    paymentStatus: '1',
    reviewStatus: '1',
    vipEnable: ''
  },
  rules: {}
});

const { queryParams, form } = toRefs(data);
/** 查询会员信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listMember(queryParams.value);
  memberList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 查询会员信息列表 */
const getMemberLevelList = async () => {
  loading.value = true;
  const res = await countLevelMember(queryParams.value);
  memberLevelCountList.value = res.data;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
  queryParams.value.pageNum = 1;
  if (level !== undefined && level !== null && level.type !== 'click') {
    queryParams.value.vipLevel = level.type;
  }
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.payStartDate = '';
  queryParams.value.payEndDate = '';
  handleQuery();
};

const memberDetail = (row: any) => {
  router.push({ path: `/szyy/member-detail`, query: { memberId: row.id } });
};
const deleteItem = async (row: any) => {
  ElMessageBox({
    title: '删除提示',
    cancelButtonText: '取消',
    confirmButtonText: '确认删除',
    showCancelButton: true,
    confirmButtonClass: 'el-button--danger',
    message: h('p', null, [
      h('div', null, `确认要删除企业：${row.cpyName} 吗？`),
      h('div', null, [h('span', null, '注意：'), h('span', { style: 'color: #F56C6C' }, '删除后，该企业将不再是协会的会员单位，请谨慎操作！')])
    ]),
    callback: async (action: string) => {
      if (action === 'confirm') {
        const res = await delMember(row.id);
        if (res) {
          ElMessage.success('删除成功');
          getList();
        }
      }
    }
  });
};
onMounted(() => {
  getList();
  getMemberLevelList();
});
</script>