EmploymentSite/vue/src/views/baseSettings/institution/index.vue

<template>
  <div class="card-search">
    <a-form ref="formRef" name="advanced_search"  class="ant-advanced-search-form" :model="searchParams" >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="企业名称" :label-col="{span:6}" name="CompanyName">
            <a-input v-model:value="searchParams.companyName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="企业地址" :label-col="{span:7}" name="CompanyAddress">
            <a-input v-model:value="searchParams.companyAddress" placeholder=""/>
<!--<a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" @change="onRangeChange"/>-->
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="负责人名称" :label-col="{span:6}" name="DutyUserName">
            <a-input v-model:value="searchParams.dutyUserName" placeholder=""/>
<!--            <a-select  ref="select"  v-model:value="searchParamsState.collegeID" :options="collegeList"
                       :field-names="{label:'name',value:'collegeID'}"  @change="loadData"  functioncode="T014000" :allow-clear="true"  >
            </a-select>-->
          </a-form-item>
        </a-col>
      <a-col :span="5" style="text-align: right">
          <a-button type="primary" html-type="submit" @click="onSearch">查询</a-button>
<!--          <a style="font-size: 12px" @click="expand = !expand">
            <template v-if="expand">
              <UpOutlined/>
            </template>
            <template v-else>
              <DownOutlined/>
            </template>
            {{ expand ? '收缩' : '展开' }}
          </a>-->
        </a-col>
      </a-row>
<!--      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <a-form-item label="问题描述" :label-col="{span:6}" name="ProblemDesc">
            <a-input v-model:value="searchParamsState.problemDesc" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="问题特性" :label-col="{span:7}" name="ProblemCharacteristics">
            <a-select
              ref="select"
              v-model:value="searchParamsState.problemCharacteristics"
              :options="problemAttrList"
              :field-names="{label:'name',value:'value'}"
              @change="loadData"
              :allow-clear="true" >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="是否解决" :label-col="{span:6}" name="IsResolve">
            <a-select
              ref="select"
              v-model:value="searchParamsState.isResolve"
              :options="resolveList"
              :field-names="{label:'resolveName',value:'resolveID'}"
              @change="loadData"
              :allow-clear="true" >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5" style="text-align: left">
        </a-col>
      </a-row>-->
      <a-row class="edit-operation">
        <a-col :span="24" style="text-align: right">
<!--functioncode="T014001"-->
          <a-button type="primary" html-type="submit" @click='onOperates(null,"新增",false)' >新增</a-button>
<!--          <BExportExcel :title="'导出'" :filename="'问题台账记录'" :url="'stitution/export'"
                        :params="{...searchParams,isExport: true, rows:100000}"></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"
               @change="handleTableChange"
               :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange}"
               :row-key="record=>record.szkey"
               bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'operation'">
            <div class="table-operation">
              <a-button type="link" size="small" @click='onOperates(record.szkey.toString(),"修改",false)' >编辑</a-button>
              <a-button type="link" size="small" @click="onDel(record)" >删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <InstitutionEditForm ref="institutionEditModelRef" :loadData="loadData"></InstitutionEditForm>
  </div>
</template>

<script lang="ts">
import {reactive, ref, computed, defineComponent, createVNode} from 'vue';
import {DownOutlined, ExclamationCircleOutlined, UpOutlined} from '@ant-design/icons-vue';
import type {FormInstance} from 'ant-design-vue';
import type {TableColumnsType, TableProps} from 'ant-design-vue';
import {getList, del} from '@/api/baseSettings/institution';
import InstitutionEditForm from "@/views/baseSettings/institution/edit.vue";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
import {getPaginationTotalTitle} from "@/utils/common";
import {message, Modal} from "ant-design-vue";

export default defineComponent({
  name: 'InstitutionList',
  components: {InstitutionEditForm, DownOutlined, UpOutlined, BExportExcel},
  setup() {
    const formRef = ref<FormInstance>();
    const searchParams = reactive({
      pageIndex: 1,
      pageSize: 20,
      primaryKey:'',
      companyName: '',
      companyAddress: '',
      dutyUserName:''
    });
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false
    });
    const columns: TableColumnsType = [
      {title: '序号', align: "center",key: 'szkey',customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`},
      {title: '企业名称', dataIndex: 'szcompanyname', key: 'szcompanyname', align: "center"},
      {title: '企业地址', dataIndex: 'szcomaddress', key: 'szcomaddress',width:120, align: "center"},
      {title: '负责人姓名', dataIndex: 'szcomusername', key: 'szcomusername', align: "center"},
      {title: '负责人电话', dataIndex: 'szcomusermobile', key: 'szcomusermobile', align: "center"},
      {title: '法人姓名', dataIndex: 'szfrname', key: 'szfrname', align: "center"},
      {title: '法人电话', dataIndex: 'szfrmobile', key: 'szfmobile', align: "center"},
      {title: '企业机构代码', dataIndex: 'szcompanycode', key: 'szcompanycode', align: "center"},
      {
        title: '管理驿站数量', dataIndex: 'SiteCount', key: 'SiteCount', align: "center",
        /*customRender:  ({record}) => record.resolveDate == null?"":dayjs(record.resolveDate).format('YYYY-MM-DD')*/
      },
      {title: '操作', key: 'operation', fixed: 'right',width:170, align: "center"},
    ];
    const pagination = computed(() => ({
      total: formState.total,
      current: searchParams.pageIndex,
      pageSize: searchParams.pageSize,
      showSizeChanger: true,
      showTotal: total => getPaginationTotalTitle(total)
    }));

    const dataList = ref([]);
    /*const problemAttrList = ref<SelectProps['options']>();
    const collegeList = ref<SelectProps['options']>();
    const resolveList = ref([{resolveName:"是",resolveID:1},{resolveName:"否",resolveID:0}]);*/
    const institutionEditModelRef = ref();

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

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

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

    const onDel= (item: any) => {
      if (item) {
        formState.selectedRowKeys.push(item.szkey 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() {

        },
      });
    };

    const onOperates = (id: string,operation:string,isDetail:boolean) => {
      institutionEditModelRef.value.show(id,operation,isDetail);
    };
    const loadData = async function () {
      formState.loading = true;
      const result: any = await getList(searchParams);
      dataList.value = result.list;
      formState.total = result.total;
      formState.loading = false;
    }



    return {
      formRef,
      searchParams,
      formState,
      columns,
      pagination,
      dataList,
      institutionEditModelRef,
      handleTableChange,
      onSelectChange,
      onSearch,
      onOperates,
      onDel,
      loadData
    };
  },
  created() {
    this.loadData();
  },
  activated() {
    if (history.state.params?.reload)
      this.loadData();
  }
});
</script>