瀏覽代碼

修复关闭盘点单界面空白

liuyanpeng 3 年之前
父節點
當前提交
196e5b0400
共有 2 個文件被更改,包括 306 次插入30 次删除
  1. 119 0
      src/components/customer/CommonTable.vue
  2. 187 30
      src/components/customer/InventoryDataProcessingStep4.vue

+ 119 - 0
src/components/customer/CommonTable.vue

@@ -0,0 +1,119 @@
+<template>
+  <!-- 表格 + 分页 -->
+  <div class="tablePaganations">
+    <a-config-provider :locale="locale">
+      <a-table
+        class="ant-table-striped"
+        bordered
+        size="small"
+        height="1000px"
+        :loading="isLoading"
+        :data-source="dataSource"
+        :columns="columns"
+        :scroll="{y:410}"
+        :pagination="pagination"
+        :row-selection="isSelect ? rowSelection : null"
+        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+        @resize-column="handleResizeColumn"
+      >
+        <template v-for="(item,index) in renderArr" #[item]="scope" :key="index">
+          <slot :name="item" :scope="scope" v-bind="scope || {}" />
+        </template>
+      </a-table>
+    </a-config-provider>
+  </div>
+</template>
+  
+<script setup>
+import { useSlots, ref, reactive, defineProps, defineEmits, watch } from 'vue';
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
+const locale = ref(zhCN);
+const props = defineProps({
+  dataSource: {
+    type: Object,
+    required: true,
+  },
+  columns: {
+    type: Object,
+    required: true,
+  },
+  isSelect: {
+    type: Boolean,
+  },
+  isLoading: {
+    type: Boolean,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+
+// 分页配置
+const pagination = reactive({
+  showQuickJumper: true,
+  current: 1,
+  pageSize: 20, // 默认每页显示数量
+  showSizeChanger: true, // 显示可改变每页数量
+  pageSizeOptions: ['10', '20', '50', '100','200','500'], // 每页数量选项值
+  showTotal: (total, range) => range[0] + '-' + range[1] + '条' + ' 共' + total + '条', // 显示总数
+  onShowSizeChange: (current, pageSize) => showSizeChange(current, pageSize),
+  onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
+  total: props.total,
+});
+// 改变每页数量时更新显示
+const showSizeChange = (current, pageSize) => {
+  setTimeout(() => {
+    pagination.current = 1;
+    emit('getPage', pagination.current, pageSize);
+  },1000);
+  pagination.pageSize = pageSize;
+};
+
+//点击页码事件
+const changePage = (current, size) => {
+  pagination.current = current;
+  emit('getPage', pagination.current, size);
+};
+
+// 是否多选
+const emit = defineEmits(['batch', 'getPage']);
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    // console.log(selectedRowKeys, selectedRows);
+    // emit('batch', selectedRowKeys);
+  },
+  getCheckboxProps: record => ({
+    // disabled: record.name === '',
+    // name: record.name,
+  }),
+};
+
+// 表头可拖拽配置
+const handleResizeColumn = (w, col) => {
+  col.width = w;
+};
+
+// 监听total变化
+watch(
+  props,
+  newData => {
+    pagination.total = newData.total;
+  },
+  { immediate: true, deep: true },
+);
+// 插槽的实例
+const slots = useSlots();
+const renderArr = Object.keys(slots);
+</script>
+<style scoped>
+.tablePaganations {
+  width: 100%;
+  margin-top: 20px;
+}
+.ant-table-striped :deep(.table-striped) td {
+  background-color:  #fafafa;
+}
+</style>
+  
+  

+ 187 - 30
src/components/customer/InventoryDataProcessingStep4.vue

@@ -1,43 +1,200 @@
 <template>
   <div>
-    <LowcodeWidget :lowcode-window-no="lowcodeWindowNo" />
-    <a-button type="primary" @click="previous">上一步</a-button>
+    <div>
+      <label>单据号</label>
+      <a-input v-model:value="searchParams.documentNo" class="common" @press-enter="searchChange" />
+      <label class="common">单据名称</label>
+      <a-input v-model:value="searchParams.documentName" class="common" @press-enter="searchChange" />
+      <a-button class="common" type="primary" @click="searchChange">
+        查询
+      </a-button>
+    </div>
+    <CommonTable
+      :columns="columns"
+      :data-source="dataSource"
+      :total="total"
+      @get-page="getPageParams"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'processed'">
+          <span>
+            {{
+              record.processed === null || record.processed === false
+                ? "关闭"
+                : "打开"
+            }}</span>
+        </template>
+        <template v-if="column.key === 'operation'">
+          <a-button
+            v-if="
+              record.processed === undefined ||
+                record.processed === null ||
+                record.processed === false
+            "
+            @click="operate(record)"
+          >
+            打开
+          </a-button>
+          <a-button v-if="record.processed === true" @click="operate(record)">
+            关闭
+          </a-button>
+        </template>
+      </template>
+    </CommonTable>
+    <a-button style="margin-top: 20px" type="primary" @click="previous">
+      上一步
+    </a-button>
   </div>
 </template>
-<script>
-import { LowcodeWidget } from 'pc-component-v3';
+<script setup>
+import Common from '../../common/Common';
+import { SqlApi, Notify } from 'pc-component-v3';
+import { ref, reactive, defineEmits, onMounted, createVNode } from 'vue';
+import CommonTable from './CommonTable.vue';
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
 
+// 查询参数
+const searchParams = reactive({
+  documentNo: '',
+  documentName: '',
+  offset: 0,
+  limit: 20,
+});
 
-export default {
-  components: {
-    LowcodeWidget,
-  },
-
-  props: {
-
-  },
-  emits: ['previous'],
-
-  data: function() {
-    return {
-      'lowcodeWindowNo': '20220516_164216',
-    };
-  },
+// 表格数据
+const columns = reactive(
+  [
+    {
+      title: '单位名称',
+      key: 'cname',
+      dataIndex: 'cname',
+      width:180,
+    },
+    {
+      title: '单据号',
+      key: 'documentNo',
+      dataIndex: 'documentNo',
+      width:200,
+    },
+    {
+      title: '单据名称',
+      key: 'name',
+      dataIndex: 'name',
+      width:200,
+    },
+    {
+      title: '盘点状态',
+      key: 'inventoryStatus',
+      dataIndex: 'inventoryStatus',
+      width:180,
+    },
+    {
+      title: '盘点总数',
+      key: 'totalCount',
+      dataIndex: 'totalCount',
+      width:180,
+    },
+    {
+      title: '已盘点数量',
+      key: 'countedQuantity',
+      dataIndex: 'countedQuantity',
+    },
+    {
+      title: '状态',
+      key: 'processed',
+      dataIndex: 'processed',
+      width:180,
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      dataIndex: 'operation',
+      width:180,
+      fixed:'right',
+    },
+  ].map(item => ({ ...item, align: 'center' })),
+);
+const dataSource = ref([]);
+const total = ref(0); // 数据总数
 
+// 打开关闭盘点单操作
+const operate = record => {
+  Modal.confirm({
+    title:
+      record.processed === null || record.processed === false
+        ? '打开盘点单'
+        : '关闭盘点单',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: createVNode(
+      'div',
+      {
+        style: 'color:red;',
+      },
+      record.processed === null || record.processed === false
+        ? `您确定要打开盘点单:${record.documentNo} 吗?`
+        : `您确定要关闭盘点单:${record.documentNo} 吗?`,
+    ),
+    onOk() {
+      if (record.processed === null || record.processed === false) {
+        AssetInventoryResource.setProcessed(record.id, true);
+      } else {
+        AssetInventoryResource.setProcessed(record.id, false);
+      }
+      queryAssetDiscovery();
+    },
+    class: 'setProcessed',
+  });
+};
 
+// 查询按钮功能
+const searchChange = () => {
+  searchParams.offset = 0;
+  queryAssetDiscovery();
+};
 
-  mounted: function() {
+const emits = defineEmits(['previous']);
+// const amisWindowNo = '20220516_164216';
 
-  },
+// 从子组件获取的分页参数
+const getPageParams = (start, length) => {
+  searchParams.offset = (start - 1) * length;
+  searchParams.limit = length;
+  queryAssetDiscovery();
+};
 
-  methods: {
-    previous: function() {
-      var data = {
-        currentStep: 0,
-        showPage: 0,
-      };
-      this.$emit('previous', data);
+onMounted(() => {
+  queryAssetDiscovery();
+});
+// 资产盘点单查询,用于界面设置盘点单状态
+const queryAssetDiscovery = () => {
+  SqlApi.execute('20220520_145516', searchParams).then(
+    successData => {
+      if (successData.errorCode === 0) {
+        dataSource.value = successData.items;
+        total.value = successData.total;
+      }
+    },
+    errorData => {
+      Common.processException(errorData);
     },
-  },
+  );
+};
+
+const previous = () => {
+  var data = {
+    currentStep: 0,
+    showPage: 0,
+  };
+  emits('previous', data);
 };
-</script>
+</script>
+<style scoped>
+input {
+  width: 200px;
+}
+.common {
+  margin-left: 8px;
+}
+</style>