|
|
@@ -1,40 +1,335 @@
|
|
|
<template>
|
|
|
- <a-table
|
|
|
- :columns="columns"
|
|
|
- :row-key="record => record.id"
|
|
|
- :data-source="dataSource"
|
|
|
- @change="handleTableChange"
|
|
|
- >
|
|
|
- </a-table>
|
|
|
+ <div>
|
|
|
+ <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="分类(class)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.classId"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="编码(code)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.code"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="中文名(Chinese name)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.chineseName"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <template v-if="toggleSearchStatus">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="英文名(English name)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.englishName"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="规格(specifications)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.specifications"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="型号(model)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.model"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="中文别名(Chinese allas)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.chineseAlias"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="英文别名(englidsh allas)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.englishAlias"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="状态(status)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.status"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="虚拟产品(virtual product)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.virtualProduct"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="有害物质(harmful substances)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
|
|
|
+ <a-input placeholder="请输入" v-model:value="queryParams.harmfulSubstances"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
|
|
|
+ <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置(reset)</a-button>
|
|
|
+ <a @click="handleToggleSearch" style="margin-left: 8px">
|
|
|
+ {{ toggleSearchStatus ? '收起' : '展开' }}
|
|
|
+ <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div style="margin-bottom: 4px;">
|
|
|
+ <a-button @click="handleAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
|
|
|
+ </div>
|
|
|
+ <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
|
|
|
+ <template #message>
|
|
|
+ <template v-if="selectedRowKeys.length > 0">
|
|
|
+ <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a @click="selectedRowKeys = []">清空</a>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>未选中任何数据</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-alert>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :row-key="record => record.id"
|
|
|
+ :data-source="dataSource"
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :pagination="pagination"
|
|
|
+ :scroll="{ x: 2500, y: 300 }"
|
|
|
+ :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
|
|
+ >
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.key === 'operation'">
|
|
|
+ <span>
|
|
|
+ <a @click="handleemit(record)">编辑(edit)</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm title="确定删除吗?" @confirm="() => deleteList(record)">
|
|
|
+ <a>删除(delete)</a>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ <productArchiveModel ref="productArchiveModelRef" @success="loadData"></productArchiveModel>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import { onMounted, ref } from 'vue';
|
|
|
+ import { usePagination } from 'vue-request';
|
|
|
+ import { defHttp } from '/@/utils/http/axios';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
|
|
+ import productArchiveModel from './components/productArchiveModel.vue';
|
|
|
+ const productArchiveModelRef = ref()
|
|
|
const columns = [
|
|
|
{
|
|
|
- name: '分类(class)',
|
|
|
- dataIndex: 'class',
|
|
|
- key: 'class',
|
|
|
+ title: '分类(class)',
|
|
|
+ dataIndex: 'classId',
|
|
|
+ key: 'classId',
|
|
|
+ align:"center"
|
|
|
},
|
|
|
{
|
|
|
title: '编码(code)',
|
|
|
dataIndex: 'code',
|
|
|
key: 'code',
|
|
|
+ align:"center"
|
|
|
},
|
|
|
{
|
|
|
title: '中文名(Chinese name)',
|
|
|
- dataIndex: 'chaineseName',
|
|
|
- key: 'chaineseName',
|
|
|
+ dataIndex: 'chineseName',
|
|
|
+ key: 'chineseName',
|
|
|
+ align:"center",
|
|
|
+ width:200
|
|
|
},
|
|
|
{
|
|
|
title: '英文名(English name)',
|
|
|
key: 'englishName',
|
|
|
dataIndex: 'englishName',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '规格(specifications)',
|
|
|
+ key: 'specifications',
|
|
|
+ dataIndex: 'specifications',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '型号(model)',
|
|
|
+ key: 'model',
|
|
|
+ dataIndex: 'model',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计量单位(measurement unit)',
|
|
|
+ key: 'measurementUnit',
|
|
|
+ dataIndex: 'measurementUnit',
|
|
|
+ align:"center",
|
|
|
+ width:250
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '税率(tax rate)',
|
|
|
+ key: 'taxRate',
|
|
|
+ dataIndex: 'taxRate',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '虚拟产品(virtual product)',
|
|
|
+ key: 'virtualProduct',
|
|
|
+ dataIndex: 'virtualProduct',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '有害物质(harmful substances)',
|
|
|
+ key: 'harmfulSubstances',
|
|
|
+ dataIndex: 'harmfulSubstances',
|
|
|
+ align:"center",
|
|
|
+ width:250
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态(status)',
|
|
|
+ key: 'status',
|
|
|
+ dataIndex: 'status',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作(operation)',
|
|
|
+ key: 'operation',
|
|
|
+ dataIndex: 'operation',
|
|
|
+ align:"center",
|
|
|
+ fixed: 'right',
|
|
|
},
|
|
|
];
|
|
|
- const dataSource = ref([]);
|
|
|
- function handleTableChange( ){
|
|
|
- console.log('handleTableChange');
|
|
|
+ const labelCol = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 9 },
|
|
|
+ });
|
|
|
+ const wrapperCol = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 15 },
|
|
|
+ });
|
|
|
+ const labelCol1 = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 12 },
|
|
|
+ });
|
|
|
+ const wrapperCol1 = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 12 },
|
|
|
+ });
|
|
|
+ const dataSource =ref([]);
|
|
|
+ let selectedRowKeys = ref([]);
|
|
|
+ const toggleSearchStatus = ref(false);
|
|
|
+ const queryParams = ref({
|
|
|
+ classId:'',
|
|
|
+ code:'',
|
|
|
+ chineseName:'',
|
|
|
+ englishName:'',
|
|
|
+ specifications:'',
|
|
|
+ model:'',
|
|
|
+ chineseAlias:'',
|
|
|
+ englishAlias:'',
|
|
|
+ status:'',
|
|
|
+ virtualProduct:'',
|
|
|
+ harmfulSubstances:'',
|
|
|
+ });
|
|
|
+ let pagination = ref({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: '', // 假设总共有100条数据
|
|
|
+ showSizeChanger: true,
|
|
|
+ showQuickJumper: true,
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
|
+ },
|
|
|
+ size:'small'
|
|
|
+ });
|
|
|
+ onMounted(() => {
|
|
|
+ //初始加载页面
|
|
|
+ loadData();
|
|
|
+ });
|
|
|
+ function loadData(){
|
|
|
+ let params = getQueryParams();
|
|
|
+ defHttp
|
|
|
+ .get({ url: '/baseCode/baseProductArchive/list',params}, { isTransformResponse: false })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ dataSource.value = res.result.records;
|
|
|
+ pagination.value.total = res.result.total;
|
|
|
+ pagination.value.current = res.result.current;
|
|
|
+ pagination.value.pageSize = res.result.size;
|
|
|
+ } else {
|
|
|
+ message.error(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ // loading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function getQueryParams(){
|
|
|
+ let params = Object.assign(queryParams.value);
|
|
|
+ params.pageNo = pagination.value.current;
|
|
|
+ params.pageSize = pagination.value.pageSize;
|
|
|
+ return filterObj(params);
|
|
|
+ }
|
|
|
+ function handleTableChange(paginations, filters, sorter){
|
|
|
+ pagination.value.total = paginations.total;
|
|
|
+ pagination.value.current = paginations.current;
|
|
|
+ pagination.value.pageSize = paginations.pageSize;
|
|
|
+ loadData()
|
|
|
};
|
|
|
+ function searchQuery(){
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ function searchReset(){
|
|
|
+ queryParams.value = {
|
|
|
+ classId:'',
|
|
|
+ code:'',
|
|
|
+ chineseName:'',
|
|
|
+ englishName:'',
|
|
|
+ specifications:'',
|
|
|
+ model:'',
|
|
|
+ chineseAlias:'',
|
|
|
+ englishAlias:'',
|
|
|
+ status:'',
|
|
|
+ virtualProduct:'',
|
|
|
+ harmfulSubstances:'',
|
|
|
+ }
|
|
|
+ pagination.value.current =1;
|
|
|
+ pagination.value.pageSize = 10;
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ function handleToggleSearch(){
|
|
|
+ toggleSearchStatus.value = !toggleSearchStatus.value;
|
|
|
+ }
|
|
|
+ function onSelectChange(keys){
|
|
|
+ selectedRowKeys.value = keys
|
|
|
+ }
|
|
|
+ function handleAdd(){
|
|
|
+ productArchiveModelRef.value.getForm('add')
|
|
|
+ }
|
|
|
+ function handleemit(record){
|
|
|
+ productArchiveModelRef.value.getForm('emidt',record)
|
|
|
+ }
|
|
|
+ function deleteList(record){
|
|
|
+ let params = {id:record.id}
|
|
|
+ defHttp.delete({ url: '/baseCode/baseProductArchive/delete', params}, { joinParamsToUrl: true }).then((res) => {
|
|
|
+ searchReset()
|
|
|
+ })
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
+/deep/.ant-form-item{
|
|
|
+ margin-bottom: 8px !important;
|
|
|
+}
|
|
|
+// /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
|
|
|
+// padding: 8px !important;
|
|
|
+// }
|
|
|
+
|
|
|
</style>
|
jingbb