global-web/src/views/BasicData/productArchive.vue

<template>
  <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="8"  :sm="8">
              <a-form-item label="分类(class)">
                <ApiSelect
                  :api="classOption"
                  showSearch
                  v-model:value="queryParams.classId"
                  :filterOption="true"
                  resultField="records"
                  labelField="name"
                  valueField="id"
                  :params="{ pageSize: -1 }"
                  optionFilterProp="label"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8"  :sm="8">
              <a-form-item label="编码(code)">
                <j-input placeholder="请输入" v-model:value="queryParams.code" />
              </a-form-item>
            </a-col>
            
            <template v-if="toggleSearchStatus">
              <a-col :md="8"  :sm="8">
                <a-form-item label="中文名(Chinese name)">
                  <j-input placeholder="请输入" v-model:value="queryParams.chineseName" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="英文名(English name)">
                  <j-input placeholder="请输入" v-model:value="queryParams.englishName" />
                </a-form-item>
              </a-col>
              <!-- <a-col :md="8"  :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="8"  :sm="8">
                <a-form-item label="型号(model)">
                  <JDictSelectTag v-model:value="queryParams.model" placeholder="请选择" dictCode="model_typer" showSearch/>
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="备件号(partno)">
                  <j-input placeholder="请输入" v-model:value="queryParams.partno" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="中文别名(Chinese allas)">
                  <j-input placeholder="请输入" v-model:value="queryParams.chineseAlias" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="英文别名(englidsh allas)" >
                  <j-input placeholder="请输入" v-model:value="queryParams.englishAlias" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="状态(status)">
                  <JDictSelectTag v-model:value="queryParams.status" placeholder="请选择" dictCode="valid_status" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="虚拟产品(virtual product)">
                  <JDictSelectTag v-model:value="queryParams.virtualProduct" placeholder="请选择" dictCode="yes_or_no" />
                </a-form-item>
              </a-col>
              <a-col :md="8"  :sm="8">
                <a-form-item label="有害物质(harmful substances)">
                  <JDictSelectTag v-model:value="queryParams.harmfulSubstances" placeholder="请选择" dictCode="yes_or_no" />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="8"  :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" style="margin-right: 1%"  v-auth="'baseCode:base_product_archive:add'">新增(add)</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu  v-auth="'baseCode:base_product_archive:deleteBatch'">
              <a-menu-item key="1" @click="batchHandleDelete" >
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button v-auth="'baseCode:base_product_archive:deleteBatch'"
            >批量操作
            <Icon icon="mdi:chevron-down" />
          </a-button>
        </a-dropdown>
      </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: 3000 }"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <span>
              <a @click="handleemit(record)" v-auth="'baseCode:base_product_archive:edit'">编辑(edit)</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => deleteList(record)" v-auth="'baseCode:base_product_archive:delete'">
                <a v-auth="'baseCode:base_product_archive:delete'">删除(delete)</a>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </a-card>
    <productArchiveModel ref="productArchiveModelRef" @success="loadData" />
  </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 { JDictSelectTag, JInput ,ApiSelect} from '/@/components/Form';
  import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
  import productArchiveModel from './components/productArchiveModel.vue';
  const productArchiveModelRef = ref();
  const columns = [
    {
      title: '分类(class)',
      dataIndex: 'classId_dictText',
      key: 'classId',
      align: 'center',
    },
    {
      title: '编码(code)',
      dataIndex: 'code',
      key: 'code',
      align: 'center',
    },
    {
      title: '备件号(partno)',
      key: 'partno',
      dataIndex: 'partno',
      align: 'center',
      ellipsis:true,
    },
    {
      title: '英文名(English name)',
      key: 'englishName',
      dataIndex: 'englishName',
      width: 300,
      align: 'center',
      ellipsis:true,
    },
    
    {
      title: '型号(model)',
      key: 'model',
      dataIndex: 'model',
      align: 'center',
    },
    {
      title: '中文名(Chinese name)',
      dataIndex: 'chineseName',
      key: 'chineseName',
      align: 'center',
      width: 200,
    },
    
    {
      title: '计量单位(measurement unit)',
      key: 'measurementUnit',
      dataIndex: 'measurementUnit',
      align: 'center',
      width: 250,
    },
    {
      title: '税率(tax rate)',
      key: 'taxRate',
      dataIndex: 'taxRate',
      align: 'center',
      customRender: function (t, r, index) {
        if (t.text && t.text !== '') {
          return t.text + '%';
        } else {
          return '';
        }
      },
    },
    {
      title: '虚拟产品(virtual product)',
      key: 'virtualProduct',
      dataIndex: 'virtualProduct',
      align: 'center',

      customRender: function (t, r, index) {
        if (t.text == 1) {
          return '是(yes)';
        } else if (t.text == 0) {
          return '否(no)';
        } else {
          return '';
        }
      },
    },
    {
      title: '有害物质(harmful substances)',
      key: 'harmfulSubstances',
      dataIndex: 'harmfulSubstances',
      align: 'center',
      width: 250,
      customRender: function (t, r, index) {
        if (t.text == 1) {
          return '是(yes)';
        } else if (t.text == 0) {
          return '否(no)';
        } else {
          return '';
        }
      },
    },
    {
      title: '状态(status)',
      key: 'status',
      dataIndex: 'status',
      align: 'center',
      customRender: function (t, r, index) {
        if (t.text == 1) {
          return '启用(enable)';
        } else if (t.text == 0) {
          return '停用(disable)';
        } else {
          return '';
        }
      },
    },
    {
      title: '修改人',
      key: 'updateBy',
      dataIndex: 'updateBy',
      align: 'center',
    },
    {
      title: '修改时间',
      key: 'updateTime',
      dataIndex: 'updateTime',
      align: 'center',
    },
    
    {
      title: '操作(operation)',
      key: 'operation',
      dataIndex: 'operation',
      align: 'center',
      fixed: 'right',
    },
  ];
  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: '',
    partno:''
  });
  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();
    // getOptiom();
  });
  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 getOptiom() {
  //   defHttp
  //     .get({ url: 'baseCode/baseProductClass/list', params: {pageSize:-1} }, { isTransformResponse: false })
  //     .then((res) => {
  //       if (res.success) {
  //         classOption.value = [];
  //         res.result.records.forEach((element) => {
  //           var obj = {
  //             label: element.name ? element.name : '无名称请维护',
  //             value: element.id ? element.id : '',
  //           };
  //           classOption.value.push(obj);
  //         });          
  //       }
  //     })
  //     .finally(() => {
  //       // loading.value = false;
  //     });
  // }
  function searchQuery() {
    loadData();
  }
  function searchReset() {
    queryParams.value = {
      classId: '',
      code: '',
      chineseName: '',
      englishName: '',
      specifications: '',
      model: '',
      chineseAlias: '',
      englishAlias: '',
      status: '',
      virtualProduct: '',
      harmfulSubstances: '',
      partno:''
    };
    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();
    });
  }
  function batchHandleDelete() {
    let params = { ids: selectedRowKeys.value.join(',') };
    defHttp.delete({ url: '/baseCode/baseProductArchive/deleteBatch', params }, { joinParamsToUrl: true }).then((res) => {
      searchReset();
    });
  }
  function classOption(){
      var params = {pageSize:-1}
      return defHttp.get({ url: 'baseCode/baseProductClass/list',params})
  }
</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>