smartsearch/vue/src/views/position/index.vue

<template>
  <div class="card-search">
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="formState"
      @finish="onFinish"
    >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item
            name="practiceBaseName"
            label="单位名称"
            :label-col="{span:6}">
<!--            <a-input v-model:value="formState.practiceBaseName" style="width: 200px"></a-input>-->
            <transfer @ok="transferOk" :default-value="selectKeys" :dictionary-code="'queryType'" :fieldId="'test'"></transfer>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            name="name"
            label="岗位名称"
            :label-col="{span:6}">
            <a-input v-model:value="formState.name" style="width: 200px"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            name="schoolYearID"
            label="学年"
            :label-col="{span:6}">
            <a-select v-model:value="formState.schoolYearID"
                      style="width: 200px" :allowClear="true"    ref="select"
                      :options="schoolYearList">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col  :span="6" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
          <a-button style="margin: 0 8px" @click="() => {formRef.resetFields();loadData()}">重置</a-button>
          <a style="font-size: 12px" @click="expand = !expand">
            <template v-if="expand">
              <UpOutlined/>
            </template>
            <template v-else>
              <DownOutlined/>
            </template>
            展开
          </a>
        </a-col>
        <a-col v-show="expand" :span="6">
          <a-form-item
            name="majorGradeID"
            label="年级专业"
            :label-col="{span:6}">
            <a-select v-model:value="formState.majorGradeID"  show-search :filter-option="filterOption"
                      style="width: 200px" :allowClear="true"
                      :options="majorGradeList"
                      @change="loadData">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-show="expand" :span="6">
          <a-form-item
            name="practiceBaseTypeID"
            label="基地类型"
            :label-col="{span:6}">
            <a-select v-model:value="formState.practiceBaseTypeID"
                      style="width: 200px" :allowClear="true"
                      :options="practiceBaseTypeList"
                      @change="loadData">
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="edit-operation">
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="button" @click="add" functioncode="T010601">新增</a-button>
          <BImportExcel :options="importOptions" @success="loadData" functioncode="T010602"></BImportExcel>
          <BExportExcel :title="'导出'" :filename="'岗位信息'" :url="'position/getList'"
                        :params="{...formState, isExport: true,rows:100000,positionIdList:selectedRowKeys.join(',')}"></BExportExcel>
          <a-popconfirm placement="leftTop"
            title="是否删除数据?"
            @confirm="onDelete()">
            <a-button type="primary" style="margin: 0 8px" html-type="button" functioncode="T010604">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }" :pagination="pagination"
               :loading="loading"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange" :row-key="record=>record.positionID"
               bordered>
        <template #bodyCell="{ column,record }">
          <template v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="detail(record.positionID)">查看
            </a-button>
            <a-button type="link" size="small" @click="edit(record.positionID)" functioncode="T010603">编辑
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, ref, defineComponent, computed} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import type {TableColumnsType, TableProps,SelectProps} from 'ant-design-vue';
import { get, postdel} from '@/api/common';
import {useRoute, useRouter} from "vue-router";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {getDictionaryItemList} from "@/api/system/dictionary";
import {message} from "ant-design-vue";
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import type {ImportProps} from "@/components/basic/excel/importExcel/ImportProps";
import BImportExcel from "@/components/basic/excel/importExcel/importExcel.vue";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
import {getPaginationTotalTitle} from "@/utils/common";
import Transfer from '@/components/basic/transfer/Transfer.vue'

export default defineComponent({
  name: 'positionlist',
  components: {DownOutlined, UpOutlined,BImportExcel,BExportExcel,Transfer},
  setup() {

    const route = useRoute();
    const router = useRouter();
    const expand = ref(false);
    const formRef = ref<FormInstance>();
    const tabsViewStore = useTabsViewStore();
    const selectedRowKeys =ref([]) ;
    const formState = reactive({
      page: 1, rows: 10, schoolYearID: '', majorGradeID: '', practiceBaseTypeID: null,
      name: null, practiceBaseName: null, positionID: "", total: 0,isPostManage:true
    });

    const practiceBaseTypeList = ref([]);
    const schoolYearList = ref<SelectProps['options']>();
    const majorGradeList = ref<SelectProps['options']>();

    const columns: TableColumnsType = [
      {
        title: '序号',
        width: 60,
        dataIndex: 'index',
        key: 'index',
        align: "center",
        customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
      },
      {title: '实习学年', width: 120, dataIndex: 'schoolYear', key: 'schoolYear',align:"center"},
      {title: '年级专业', dataIndex: 'majorGradeName', key: '1', width:180},
      {title: '基地类型', dataIndex: 'practiceBaseTypeName', key: '2', width: 150, align: "center"},
      {title: '单位名称', dataIndex: 'practiceBaseName', key: '3', width: 200},
      {title: '岗位名称', dataIndex: 'name', key: '5', width: 120},
      {title: '岗位数量', dataIndex: 'qty', key: '5', width: 100,align:"center"},
      {title: '备注', dataIndex: 'remark', key: '5', width: 180,ellipsis: true},
      {
        title: '操作', key: 'operation', width: 120, align: "center"
      },
    ];

    const selectKeys = ref("1,2,3,4");
    const transferOk = (keys: string, fieldId: string) => {
      selectKeys.value = keys;
      console.log(selectKeys.value, fieldId);
    }

    const importOptions = ref<ImportProps>({
      title: "导入",
      url: 'position/importData',
      columns: [
        {cnName: "实习开始年份", enName: "startYear",width:100},
        {cnName: "年级专业名称", enName: "majorGradeName",width:200},
        {cnName: "所属单位", enName: "practiceBaseName",width:200},
        {cnName: "岗位名称", enName: "name",width:200},
        {cnName: "岗位数量", enName: "qty",width:100},
        {cnName: "备注", enName: "remark",width:150}],
      template: {
        tempFileName: "岗位导入模板.xlsx",
        url: '',
        params: null
      }
    });

    getDictionaryItemList({code: "PracticeBaseType"}).then(x => {
      practiceBaseTypeList.value = x.filter(f => f.value != 3).map(x => ({
        label: x.name,
        value: x.value
      }));
    })


    const filterOption = (input: string, option: any) => {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    const data = ref([]);
    const pagination = computed(() => ({
      total: formState.total,
      current: formState.page,
      pageSize: formState.rows,
      showSizeChanger: true,
      showTotal: total => getPaginationTotalTitle(total)
    }));
    const loading = ref(false);

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

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

    const loadData = async function () {
      loading.value = true;
      const result: any = await get('position/getList', formState);

      data.value = result.list;
      formState.total = result.total;
      loading.value = false;
    }
    const onDelete = () => {
      if (selectedRowKeys.value.length <= 0) {
        message.warning('请选择需要删除的数据！');
        return false;
      }
      postdel('position/deletePosition', selectedRowKeys.value).then(() => {
        loadData();
      })
    };
    const detail = (key: string) => {
      tabsViewStore.addTabByPath('/position/detail', {id: key});
    };
    const add = () => {
      //tabsViewStore.addTabByPath('/position/edit', {});
      tabsViewStore.addTabByPath('/query/index', {tempId: 'af029fdd-62ca-443e-9503-f940f40a7fdc'});
    };
    const edit = (key: string) => {
      tabsViewStore.addTabByPath('/position/edit', {id: key});
    };
    const onSelectChange = (keys: any) => {
      selectedRowKeys.value = keys;
    };
    return {
      router,
      route,
      expand,transferOk,selectKeys,
      formRef,
      formState,
      columns,data,loading,selectedRowKeys,
      pagination,practiceBaseTypeList,majorGradeList,schoolYearList,
      handleTableChange,
      onSelectChange,
      onFinish,
      loadData,
      detail,
      add,
      edit,onDelete,filterOption,
      importOptions
    };
  },
  created() {
    this.loadData();
  },
  activated() {
    if (history.state.params?.reload)
      this.loadData();
  }
});
</script>