zhywpt-web/src/views/inventoryControl/newInventory/cardIssuanceBatch/index.vue

<template>
  <div>
    <crud-template ref="crudRef" class="as-weight" :submit-state="false" :home-data="field" :tableData="tableData"
      @btnSearch="btnSearch" @CurrentChange="handleCurrentChange" @importData="importData" @download="downloadHandle"
      @refreshLeft="refreshLeft" @add="Adds" @cancel="cancel" @submit="submitAdd" @handleEdit="itemEdit">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.batchNo" style="width: 200px"
          placeholder="请输入批次号" />
        <!-- <el-input maxlength="60" v-trim clearable v-model="searchForm.providerID" style="width: 200px"
          placeholder="请输入厂商代码" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.version" style="width: 200px"
          placeholder="请输入卡片版本号" /> -->
        <el-select clearable v-model="searchForm.cardType" style="width: 200px;" placeholder="请选择卡片类型">
          <el-option v-for="item in CARD_TYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-date-picker unlink-panels v-model="value1" type="daterange" range-separator="到" start-placeholder="批次申请开始日期"
          end-placeholder="批次申请结束日期" format="YYYYMMDD" value-format="YYYYMMDD" @change="dateChangeHandle" />
      </template>
    </crud-template>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
// @ts-ignore crudFrom模板
import CrudTemplate from '@/crud/index.vue'
import BaseService from '@/utils/baseService' //引入接口请求
import {
  ElMessage,
} from 'element-plus' //提示
import { getZxqdFindConfig,CARD_TYPE } from "./data.js";
import { useRoute } from 'vue-router'
import { exportFn } from '@/views/settlement/exportFn'
import $storeinitData from "@/store/initData"; //引入tab vuex
//或取路由传入过来的对象数据
const route = useRoute()
const widthBase = '120px';
const crudRef = ref()
let tableData: any = ref([])
const itemStartValue = ref("1")
const value1 = ref();
//查询参数
const searchForm = ref({ agencyId: '' })
const agencyIdList = ref([])
const field = ref(getZxqdFindConfig(route, agencyIdList));
onMounted(() => {
  getList()
})
// 导出
function downloadHandle() {
  exportFn('/invw/api/cardBatch/export', searchForm.value, '卡片发行批次')
}
//获取列表
function getList() {
  crudRef.value.tableLoding = true
  let params: any = {
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
  }
  //赋值查询参数
  let searchFormList = { ...searchForm.value }
  for (let key in searchFormList) {
    if (searchFormList[key]) {
      params[key] = searchFormList[key]
    }
  }
  BaseService.postN('/invw/api/cardBatch/page', params).then((res: any) => {
    if (res && res.code === 0) {
      //数据转换
      let bizContent = res.data
      let data = bizContent.result || []
      //数据渲染
      tableData.value = data
      crudRef.value.tableLoding = false
      //分页总数
      field.value.paging.total = bizContent.totalCount
    } else {
      crudRef.value.tableLoding = false
      ElMessage.error(res.message)
    }
  })
}
function dateChangeHandle(val: any) {
  if (val) {
    searchForm.value.batchDateStart = val[0];
    searchForm.value.batchDateEnd = val[1];
  } else {
    searchForm.value.batchDateStart = "";
    searchForm.value.batchDateEnd = "";
  }
}
const Adds = () => {
  itemStartValue.value = 1
}
//表单编辑按钮
function itemEdit(idx: any, row: any) {
  itemStartValue.value = 2
}

// 添加
const submitAdd = (data: any) => {
  request(data, itemStartValue.value)
}

const request = (data: any, type: any) => {
  data.optType = type //操作类型 1新增 2修改 
  BaseService.postN(itemStartValue.value == 1 ? '/userw/wxCar/add' : '/userw/wxCar/update', data).then((res: any) => {
    if (res && res.code === 0) {
      getList()
      crudRef.value.reset();
      crudRef.value.dialogFormVisible = false;
    } else {
      ElMessage.error(res.message)
    }
  })
}
// 删除
const deleteHandle = (index) => {
  addForm.value.locationModels.splice(index, 1)
}
// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1
  getList()
}

//标签分页
function handleClick(tab, event) {
  orderStep.value = tab.props.name
  getList()
}

//分页
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val
  getList()
}

// 搜索重置
function refreshLeft() {
  searchForm.value = {}
  value1.value = ''
  getList()
}

</script>
<style lang="scss" scoped></style>