EmploymentSite/vue/src/views/jobUserManager/signinMgt/index.vue

<template>
  <div class="card-search">
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="searchParamsState"
    >
      <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="姓名" :label-col="{ span: 8 }" name="name">
              <a-input v-model:value="searchParamsState.name" placeholder="" :allow-clear="true" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="所属县区" :label-col="{span:8}" name="regionCode">
              <a-select
                ref="select"
                v-model:value="searchParamsState.regionCode"
                :options="regionList"
                :field-names="{ label: 'name', value: 'code' }"
                :allow-clear="true"
                @change="regionChange"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="所属驿站" :label-col="{ span: 8 }" name="siteID">
              <a-select
                ref="select"
                v-model:value="searchParamsState.siteID"
                :options="siteList"
                :field-names="{ label: 'siteName', value: 'siteID' }"
                :allow-clear="true"
                @change="loadData"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="text-align: center;">
            <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
          </a-col>
      </a-row>
      <a-row :gutter="24" >
        <a-col :span="6">
          <a-form-item label="外出类型" :label-col="{ span: 8 }" name="signinType">
            <a-select
              ref="select"
              v-model:value="searchParamsState.signinType"
              :options="signinTypeList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
              @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="外出时间" :label-col="{ span: 8 }" name="signinDate">
            <a-range-picker v-model:value="signinDate" :placeholder="['开始日期', '结束日期']" format="YYYY-MM-DD"
                            @change="onCreateTimeChange"/>
          </a-form-item>
        </a-col>

        <a-col :span="6">

        </a-col>

        <a-col :span="6" style="text-align: center;">
          <BExportExcel :title="'导出'" :filename="'企业信息'"
                        :url="'jobusermgr/signinMgt/export'"
                        :params="{...exportSearchParams, isExport: true, rows:10000,signinIDList:formState.selectedRowKeys.join(',')}"></BExportExcel>
        </a-col>
      </a-row>

    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: '100%', y: 500 }"
        :pagination="pagination"
        :loading="formState.loading"
        :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange }"
        :row-key="(record) => record.signinId"
        bordered
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'operation'">
            <div class="table-operation">
              <a-button type="link" size="small" functioncode="T01030502"
                        @click='onEdit(record)'>修改
              </a-button>
              <a-button type="link" size="small" functioncode="T01030503"
                        @click='onDel(record)'>删除
              </a-button>
              <a-button type="link" size="small" functioncode="T01030504"
                        @click='onForward(record)'>跟进
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, ref, computed, defineComponent, createVNode} from 'vue';
import type {FormInstance, TableProps, SelectProps} from 'ant-design-vue';
import {getList,del} from "@/api/jobUserManager/signinMgt";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getPaginationTotalTitle} from '@/utils/common';
import dayjs from "dayjs";
import {getSiteList} from "@/api/baseSettings/siteInfo";
import {get} from "@/api/common";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
import ColumnsSetting from "@/components/common/ColumnsSetting.vue";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {useTabsViewStore} from "@/store/modules/tabsView";

export default defineComponent({
  name: 'recommendMgtList',
  components: {ColumnsSetting, BExportExcel},
  setup() {
    const expand = ref(false);
    const modalRoleUserRef = ref();
    const modalRoleEditRef = ref();
    const modalAddRemarkRef = ref();
    const formRef = ref<FormInstance>();
    const searchParamsState = reactive({
      pageIndex: 1,
      pageSize: 20,
      name: '',
      siteID: null,
      regionCode: null,
      signinType: null,
      startDate: null,
      endDate: null
    });
    const exportSearchParams = computed(() => {
      let data = JSON.parse(JSON.stringify(searchParamsState));
      data.pageSize = formState.total;
      return data;
    })
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false,
    });
    // 原始表格定义数据
    const originalColumns = [
      {
        title: '序号',
        align: 'center',
        width: 80,
        key: 'recommendMgtID',
        customRender: (item) =>
          `${searchParamsState.pageSize * (searchParamsState.pageIndex - 1) + item.index + 1}`, isDisabled: true
      },
      {title: '外出人员', dataIndex: 'signinerName', key: 'signinerName', align: "center"},
      {
        title: '外出时间', dataIndex: 'signinTime', key: 'signinTime', align: "center",
        customRender: ({record}) => dayjs(record.signinTime).format('YYYY-MM-DD HH:mm')
      },
      {title: '所属县区', dataIndex: 'regionName', key: 'regionName', align: "center"},
      {title: '所属驿站', dataIndex: 'siteName', key: 'siteName', align: "center"},
      {title: '外出类型', dataIndex: 'signinTypeName', key: 'signinTypeName', align: "center"},
      {title: '走访企业', dataIndex: 'companyName', key: 'companyName', align: "center"},
      {title: '走访人员', dataIndex: 'jobUserName', key: 'jobUserName', align: "center"},
      {title: '走访内容', dataIndex: 'content', width:300, key: 'content', align: "center", isDefaultClose: false},
      {title: '操作', key: 'operation', width: 150, align: 'center', isDisabled: true, isDefaultClose: true},
    ];
    // 响应式表格定义
    const columns = ref<Array<any>>(originalColumns.filter(item => !item.isDefaultClose));
    const siteList = ref<Array<any>>([]);
    const regionList = ref<SelectProps['options']>();
    const signinDate = ref([]);
    const pagination = computed(() => ({
      total: formState.total,
      current: searchParamsState.pageIndex,
      pageSize: searchParamsState.pageSize,
      showSizeChanger: true,
      showTotal: (total) => getPaginationTotalTitle(total),
    }));

    const dataList = ref([]);
    const signinTypeList = ref<SelectProps['options']>();

    const onSelectChange = (selectedRowKeys: any) => {
      formState.selectedRowKeys = selectedRowKeys;
    };

    const handleTableChange: TableProps['onChange'] = (pag: {
      pageSize: number;
      current: number;
    }) => {
      searchParamsState.pageIndex = pag.current;
      searchParamsState.pageSize = pag.pageSize;
      loadData();
    };

    const onFinish = () => {
      loadData();
    };

    const tabsViewStore = useTabsViewStore();
    const onEdit = (item: any) => {
      tabsViewStore.addTabByPath('/jobusermgr/signinMgt/edit', {id: item.signinId});
    };

    const onDel = (item: any) => {
      formState.selectedRowKeys = [];
      if (item) {
        formState.selectedRowKeys.push(item.signinId as never)
      }

      if (formState.selectedRowKeys.length <= 0) {
        message.warning('请选择需要删除的数据！');
        return false;
      }
      Modal.confirm({
        title: '确认删除选择的外出服务信息？',
        icon: createVNode(ExclamationCircleOutlined),
        content: '',
        okText: '确认删除',
        okType: 'danger',
        okButtonProps: {},
        cancelText: '取消',
        onOk() {
          del(formState.selectedRowKeys).then(() => {
            loadData();
          });
        },
        onCancel() {
          formState.selectedRowKeys = [];
        },
      })
    }

    const onForward = (item:any) =>{
      console.log(item)
    }

    function getAllSites() {
      getSiteList({pageIndex: 1, pageSize: 9999}).then((result: any) => {
        if(searchParamsState.regionCode!=""&& searchParamsState.regionCode!=null){
          result.list = result.list.filter(x=> x.regionCode == searchParamsState.regionCode);
        }
        siteList.value = result.list;
      });
    }

    function regionChange() {
      siteList.value = [];
      getAllSites();
      loadData();
    }

    function getAllRegion() {
      get('system/area/getCityList', {}).then(data => {
        regionList.value = data;
      });
    }

    const loadData = async function () {
      formState.loading = true;
      const result: any = await getList(searchParamsState);
      dataList.value = result.list;
      formState.total = result.total;
      formState.loading = false;
    };


    const theModalClosed = (d) => {
      if (d) {
        loadData();
      }
    }

    const getSigninTypeList = () => {
      getSysDictionaryList('SigninType').then((data) => {
        signinTypeList.value = data;
      });
    };

    const onCreateTimeChange = (dateString) => {
      signinDate.value = dateString;
      searchParamsState.startDate = dateString ? dateString[0].format("YYYY-MM-DD") : '';
      searchParamsState.endDate = dateString ? dateString[1].format("YYYY-MM-DD") : '';
      loadData();
    }

    function columnsCheckSub(columnsKeys: Array<string>) {
      columns.value = originalColumns.filter((item: any) => columnsKeys.includes(item.key));
    }

    return {
      modalRoleUserRef,
      modalRoleEditRef,
      modalAddRemarkRef,
      formRef,
      loadData,
      searchParamsState,
      exportSearchParams,
      formState,
      columns,
      originalColumns,
      columnsCheckSub,
      pagination,
      dataList,
      signinTypeList,
      theModalClosed,
      onSelectChange,
      handleTableChange,
      onFinish,
      getSigninTypeList,
      expand,
      siteList,
      regionList,
      getAllSites,
      getAllRegion,
      signinDate,
      regionChange,
      onCreateTimeChange,
      onEdit,
      onDel,
      onForward
    };
  },
  created() {
    this.loadData();
    this.getSigninTypeList();
    this.getAllSites();
    this.getAllRegion();
  },
  activated() {
    if (history.state.params?.reload) this.loadData();
  },
});
</script>

<style lang="less" scoped></style>