yqyc-system/snowy-admin-web/src/views/yqyc/general-ledger/two/index.vue

<template>
  <a-card :bordered="false" v-if="indexShow">
    <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="企业编码" name="companyCode">
            <a-input v-model:value="searchFormState.companyCode" placeholder="请输入企业编码" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="企业名称" name="companyName">
            <a-input v-model:value="searchFormState.companyName" placeholder="请输入企业名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="账册类型" name="accountType">
            <a-select v-model:value="searchFormState.accountType" placeholder="请选择账册类型"
                      :options="tzlxOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="商品编码" name="commodityCode">
            <a-input v-model:value="searchFormState.commodityCode" placeholder="请输入商品编码" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="商品名称" name="commodityName">
            <a-input v-model:value="searchFormState.commodityName" placeholder="请输入商品名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="业务类型" name="businessType">
            <a-select v-model:value="searchFormState.businessType" placeholder="请选择业务类型"
                      :options="businessTypeOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <div class="account-number">
            <a-form-item label="记账数量" name="accountNumberMin">
              <a-input-number v-model:value="searchFormState.accountNumberMin" placeholder="请输入"
                              style="width: 100%;"/>
            </a-form-item>
            <a-form-item label="至" name="accountNumberMax">
              <a-input-number v-model:value="searchFormState.accountNumberMax" placeholder="请输入"
                              style="width: 100%;"/>
            </a-form-item>
          </div>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="法定计量单位" name="measurementUnit">
            <a-select v-model:value="searchFormState.measurementUnit" placeholder="请选择法定计量单位"
                      :options="measurementUnitOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="二线出岛申请单号" name="secondlineOutislandNumber">
            <a-input v-model:value="searchFormState.secondlineOutislandNumber" placeholder="请输入二线出岛申请单号"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="出/入库日期" name="warehouseTime">
            <a-range-picker v-model:value="searchFormState.warehouseTime" show-time allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6" v-show="advanced">
          <a-form-item label="记账日期" name="accountTime">
            <a-range-picker v-model:value="searchFormState.accountTime" show-time allow-clear/>
          </a-form-item>
        </a-col>
		<a-col :span="6" v-show="advanced">
		  <a-form-item label="账册编号" name="accountCode">
		    <a-input v-model:value="searchFormState.accountCode" placeholder="请输入账册编号" allow-clear/>
		  </a-form-item>
		</a-col>
	    <a-col :span="6" v-show="advanced">
		  <a-form-item label="出/入库单号" name="warehouseNumber">
			  <a-input v-model:value="searchFormState.warehouseNumber" placeholder="请输入出库单号" allow-clear/>
		  </a-form-item>
	    </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="onSearch()">查询</a-button>
          <a-button style="margin: 0 8px" @click="reset">重置</a-button>
          <a @click="toggleAdvanced" style="margin-left: 8px">
            {{ advanced ? '收起' : '展开' }}
            <component :is="advanced ? 'up-outlined' : 'down-outlined'"/>
          </a>
        </a-col>
      </a-row>
    </a-form>
    <s-table
      ref="tableRef"
      :columns="columns"
      :data="loadData"
      :alert="options.alert.show"
      bordered
      :row-key="(record) => record.id"
      :tool-config="toolConfig"
      :row-selection="options.rowSelection"
      v-model:filterParam="filterParam"
      :scroll="{ x: 2000 }"
    >
      <template #operator class="table-operator">
        <a-space>
<!--          <a-button type="primary" @click="onDetail()" v-if="hasPerm('qySecondlineWarehouseAdd')">-->
<!--            <template #icon>-->
<!--              <plus-outlined/>-->
<!--            </template>-->
<!--            新增-->
<!--          </a-button>-->
<!--          <xn-batch-delete-->
<!--            v-if="hasPerm('qySecondlineWarehouseDelete')"-->
<!--            :selectedRowKeys="selectedRowKeys"-->
<!--            @batchDelete="deleteBatchQySecondlineWarehouse"-->
<!--          />-->
          <a-button @click="onExport" v-if="hasPerm('qySecondlineWarehouseBatchExport')">
            <template #icon>
              <export-outlined/>
            </template>
            批量导出
          </a-button>
          <a-button @click="onPrint">
            <template #icon>
              <PrinterOutlined />
            </template>
            打印
          </a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'companyName'">
          <a-button type="link" class="__button-link" @click="enterpriseDetailRef.onOpen(record)">
            {{record.companyName}}
          </a-button>
        </template>
        <template v-if="column.dataIndex === 'accountType'">
          {{ $TOOL.dictTypeData('tzlx', record.accountType) }}
        </template>
        <template v-if="column.dataIndex === 'businessType'">
          {{ $TOOL.dictTypeData('bussiness_type', record.businessType) }}
        </template>
        <template v-if="column.dataIndex === 'measurementUnit'">
          {{ $TOOL.dictTypeData('measurement unit', record.measurementUnit) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
<!--            <a @click="onDetail(record, true)" v-if="hasPerm('qySecondlineWarehouseView')">查看</a>-->
<!--            <a @click="onDetail(record)" v-if="hasPerm('qySecondlineWarehouseEdit')">编辑</a>-->
<!--            <a-popconfirm title="确定要删除吗？" @confirm="deleteQySecondlineWarehouse(record)">-->
<!--              <a-button type="link" danger size="small" v-if="hasPerm('qySecondlineWarehouseDelete')">删除</a-button>-->
<!--            </a-popconfirm>-->
            <a-button type="link" primary size="small" @click="goodsDetailRef.onOpen(record)">出库单</a-button>
            <a-button type="link" primary size="small" @click="certificateDetailRef.onOpen(record)">记账凭证</a-button>
          </a-space>
        </template>
      </template>
    </s-table>
  </a-card>
  <Detail v-else ref="detailRef" @onClose="indexShow = true" @successful="onSearch()"/>
  <EnterpriseDetail ref="enterpriseDetailRef"/>
  <GoodsDetail ref="goodsDetailRef"/>
  <CertificateDetail ref="certificateDetailRef"/>
</template>

<script setup name="qysecondlinewarehouse">
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import Detail from './detail.vue'
import qySecondlineWarehouseApi from '@/api/yqyc/qySecondlineWarehouseApi'
import downloadUtil from "@/utils/downloadUtil";
import EnterpriseDetail from "@/views/yqyc/component/enterprise/detail.vue";
import GoodsDetail from "./goods.vue";
import CertificateDetail from "./certificate.vue";
import qyFrontlineWarehouseApi from "@/api/yqyc/qyFrontlineWarehouseApi";
import printJS from "print-js";

const {proxy} = getCurrentInstance()
const searchFormState = ref({})
const searchFormStateReal = ref({}) // 点击搜索后备份的查询参数
const searchFormRef = ref()
const tableRef = ref()
const filterParam = ref({})
const detailRef = ref()
const enterpriseDetailRef = ref()
const goodsDetailRef = ref()
const certificateDetailRef = ref()
const indexShow = ref(true)
const toolConfig = {refresh: true, height: true, columnSetting: true, striped: false}
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
  advanced.value = !advanced.value
}
const columns = ref([
  {
    title: '企业编码',
    dataIndex: 'companyCode',
  },
  {
    title: '企业名称',
    dataIndex: 'companyName',
  },
  {
    title: '账册类型',
    dataIndex: 'accountType',
  },
  {
    title: '账册编号',
    dataIndex: 'accountCode',
  },
  {
    title: '商品编码',
    dataIndex: 'commodityCode',
  },
  {
    title: '商品名称',
    dataIndex: 'commodityName',
  },
  {
    title: '业务类型',
    dataIndex: 'businessType',
  },
  {
    title: '记账数量',
    dataIndex: 'accountNumber',
    sorter: true,
  },
  {
    title: '库存数量',
    dataIndex: 'kcNumber',
    sorter: true,
  },
  {
    title: '法定计量单位',
    dataIndex: 'measurementUnit',
  },
  {
    title: '二线出岛申请单号',
    dataIndex: 'secondlineOutislandNumber',
  },
  {
    title: '出/入库单号',
    dataIndex: 'warehouseNumber',
  },
  {
    title: '出/入库日期',
    dataIndex: 'warehouseTime',
    sorter: true,
  },
  {
    title: '记账日期',
    dataIndex: 'accountTime',
    sorter: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 200,
    fixed: 'right',
  }
])
// 操作栏通过权限判断是否显示
if (hasPerm(['qyFrontlineWarehouseView', 'qyFrontlineWarehouseEdit', 'qyFrontlineWarehouseDelete'])) {
  columns.value.forEach(v => {
    if (v.dataIndex === 'action') {
      v.width = 200
    }
  })
}
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
  // columns数字类型字段加入 needTotal: true 可以勾选自动算账
  alert: {
    show: true,
    clear: () => {
      selectedRowKeys.value = ref([])
    }
  },
  rowSelection: {
    onChange: (selectedRowKey, selectedRows) => {
      selectedRowKeys.value = selectedRowKey
    }
  }
}
const loadData = (parameter) => {
  tableRef.value.clearSelected()
  // warehouseTime范围查询条件重载
  if (searchFormStateReal.value.warehouseTime) {
    searchFormStateReal.value.startWarehouseTime = proxy.$util.YMDHms(searchFormStateReal.value.warehouseTime[0])
    searchFormStateReal.value.endWarehouseTime = proxy.$util.YMDHms(searchFormStateReal.value.warehouseTime[1])
    delete searchFormStateReal.value.warehouseTime
  }
  // accountTime范围查询条件重载
  if (searchFormStateReal.value.accountTime) {
    searchFormStateReal.value.startAccountTime = proxy.$util.YMDHms(searchFormStateReal.value.accountTime[0])
    searchFormStateReal.value.endAccountTime = proxy.$util.YMDHms(searchFormStateReal.value.accountTime[1])
    delete searchFormStateReal.value.accountTime
  }
  return qySecondlineWarehouseApi.qySecondlineWarehousePage(Object.assign(parameter, searchFormStateReal.value)).then((data) => {
    return data
  })
}
// 搜索同时备份参数
const onSearch = (parameter) => {
  searchFormStateReal.value = cloneDeep(Object.assign(searchFormState.value, filterParam.value))
  tableRef.value.refresh(parameter)
}
// 重置
const reset = () => {
  searchFormRef.value?.resetFields()
  onSearch(true)
}
// 删除
const deleteQySecondlineWarehouse = (record) => {
  let params = [
    {
      id: record.id
    }
  ]
  qySecondlineWarehouseApi.qySecondlineWarehouseDelete(params).then(() => {
    tableRef.value.refresh(true)
  })
}
// 批量删除
const deleteBatchQySecondlineWarehouse = (params) => {
  qySecondlineWarehouseApi.qySecondlineWarehouseDelete(params).then(() => {
    tableRef.value.clearRefreshSelected()
  })
}
// 批量导出
const onExport = () => {
  const params = {
    ...filterParam.value
  }
  if (selectedRowKeys.value.length > 0) {
    params.ids = selectedRowKeys.value
  } else {
    Object.entries(searchFormStateReal.value).forEach(([key, value]) => {
      console.log(key)
      if (proxy.$util.isValue(value)) {
        params[key] = value
      }
    })
  }
  qySecondlineWarehouseApi.qySecondlineWarehouseExport(params).then((res) => {
    downloadUtil.resultDownload(res)
    tableRef.value.clearSelected()
  })
}
// 切换至表单
const onDetail = (record = null, view) => {
  indexShow.value = false
  nextTick(() => {
    detailRef.value.onOpen(record, view)
  })
}
const onPrint = () => {
  qySecondlineWarehouseApi.qySecondlineWarehousePrintPdf(searchFormStateReal.value).then(res => {
    printJS(res, 'pdf')
  })
}
const tzlxOptions = tool.dictList('tzlx')
const businessTypeOptions = tool.dictList('bussiness_type')
const measurementUnitOptions = tool.dictList('measurement unit')
</script>

<style lang="less" scoped>
.account-number {
  display: flex;

  :deep(.ant-form-item:last-child) {
    .ant-form-item-label {
      margin: 0 6px;

      > label:after {
        display: none;
      }
    }
  }
}
</style>