From 0f54477b3973ea68beda314d3e99443c8bf8bae7 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 26 Oct 2023 00:38:21 +0800
Subject: [PATCH] Add retail shipments model views

---
 .../shipments/components/AddEditModal.vue     | 348 ++++++++++++++++++
 .../shipments/components/DetailInfoModal.vue  |   7 +
 src/views/retail/shipments/index.vue          | 175 +++++++++
 3 files changed, 530 insertions(+)
 create mode 100644 src/views/retail/shipments/components/AddEditModal.vue
 create mode 100644 src/views/retail/shipments/components/DetailInfoModal.vue
 create mode 100644 src/views/retail/shipments/index.vue

diff --git a/src/views/retail/shipments/components/AddEditModal.vue b/src/views/retail/shipments/components/AddEditModal.vue
new file mode 100644
index 0000000..027b026
--- /dev/null
+++ b/src/views/retail/shipments/components/AddEditModal.vue
@@ -0,0 +1,348 @@
+<template>
+  <a-modal
+      :title="title"
+      :width="width"
+      :confirm-loading="confirmLoading"
+      v-bind:prefixNo="prefixNo"
+      :id="prefixNo"
+      :keyboard="false"
+      :forceRender="true"
+      switchHelp
+      switchFullscreen
+      v-model:open="open"
+      @cancel="handleCancelModal"
+      @ok="handleOkModal"
+      style="top:20px;height: 95%;">
+    <template slot="footer">
+      <a-button @click="">取消</a-button>
+      <a-button v-if="checkFlag && isCanCheck" :loading="confirmLoading" @click="">保存并审核</a-button>
+      <a-button type="primary" :loading="confirmLoading" @click="">保存</a-button>
+      <!--发起多级审核-->
+      <a-button v-if="!checkFlag" @click="" type="primary">提交流程</a-button>
+    </template>
+    <a-spin :spinning="confirmLoading">
+      <a-form ref="formRef" :model="formState">
+        <a-row class="form-row" :gutter="24">
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="会员卡号" data-step="1" data-title="会员卡号"
+                         data-intro="如果发现需要选择的会员卡号尚未录入，可以在下拉框中点击新增会员信息进行录入">
+              <a-select placeholder="选择会员卡号" v-model:value="formState.memberId"
+                        :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children" @change="">
+                <div slot="dropdownRender" slot-scope="menu">
+                  <v-nodes :vnodes="menu" />
+                  <a-divider style="margin: 4px 0;" />
+                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
+                       @mousedown="e => e.preventDefault()" @click=""><a-icon type="plus" /> 新增会员</div>
+                </div>
+                <a-select-option v-for="(item,index) in memberList" :key="index" :value="item.id">
+                  {{ item.member }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据日期">
+              <a-date-picker show-time placeholder="选择时间" @change="dateChange" @ok="dateOk" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据编号" data-step="2" data-title="单据编号"
+                         data-intro="单据编号自动生成、自动累加、开头是单据类型的首字母缩写，累加的规则是每次打开页面会自动占用一个新的编号">
+              <a-input placeholder="请输入单据编号" v-model:value="formState.receiptNumber" :readOnly="true"/>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="收款类型" data-step="3" data-title="收款类型"
+                         data-intro="收款类型可以有现付和预付款两种类型，当选择了会员之后，如果该会员有预付款，在此处会显示具体预付款的金额，而且系统会优先默认选中预付款">
+              <a-select placeholder="请选择付款类型" v-model:value="formState.paymentType" :dropdownMatchSelectWidth="false">
+                <a-select-option v-for="(item,index) in payTypeList" :key="index" :value="item.value">
+                  {{ item.text }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row class="form-row" :gutter="24">
+          <a-col :lg="18" :md="12" :sm="24">
+            <a-table :columns="tableColumns"
+                     :dataSource="tableData">
+              <a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入">
+                <a-col v-if="scanStatus" :md="6" :sm="24">
+                  <a-button @click="scanEnter">扫码录入</a-button>
+                </a-col>
+                <a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px">
+                  <a-input placeholder="请扫条码或序列号并回车" v-model:value="formState.scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/>
+                </a-col>
+                <a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px 18px 0 0">
+                  <a-button @click="stopScan">收起扫码</a-button>
+                </a-col>
+              </a-row>
+              <a-icon type="down" @click="handleBatchSetWarehouse" />
+              <a-divider v-if="isTenant" style="margin: 4px 0;" />
+              <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" @click="addWarehouse"><a-icon type="plus" /> 新增仓库</div>
+            </a-table>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="24" :md="24" :sm="24">
+                <a-form-item :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 24 }}" label="">
+                  <a-textarea :rows="1" placeholder="请输入备注" v-model:value="formState.remark" style="margin-top:8px;"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="6" :md="12" :sm="24">
+                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="附件" data-step="9" data-title="附件"
+                             data-intro="可以上传与单据相关的图片、文档，支持多个文件">
+                  <a-upload v-model:file-list="fileList" action="">
+                    <a-button>
+                      <upload-outlined/>
+                      点击上传附件
+                    </a-button>
+                  </a-upload>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-col>
+          <div class="sign">
+            <a-col :lg="6" :md="12" :sm="24">
+              <a-row class="form-row" :gutter="24">
+                <a-col :lg="24" :md="6" :sm="6"><br/><br/></a-col>
+                <a-col :lg="24" :md="6" :sm="6">
+                  <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="5" data-title="单据金额"
+                               data-intro="单据金额等于左侧商品的总金额">
+                    <span slot="label" style="font-size: 20px;line-height:20px">单据金额</span>
+                    <a-input v-model:value="formState.receiptAmount" :style="{color:'purple'}" :readOnly="true"/>
+                  </a-form-item>
+                </a-col>
+                <a-col :lg="24" :md="6" :sm="6">
+                  <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="6" data-title="收款金额"
+                               data-intro="收款金额为收银员收取用户的实际金额">
+                    <span slot="label" style="font-size: 20px;line-height:20px">收款金额</span>
+                    <a-input v-model:value="formState.paymentAmount" :style="{color:'red'}" defaultValue="0" @change="onChangePaymentAmount"/>
+                  </a-form-item>
+                </a-col>
+                <a-col :lg="24" :md="6" :sm="6">
+                  <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="7" data-title="找零"
+                               data-intro="找零等于收款金额减去实收金额">
+                    <span slot="label" style="font-size: 20px;line-height:20px">找零</span>
+                    <a-input v-model:value="formState.backAmount" :style="{color:'green'}" :readOnly="true" defaultValue="0"/>
+                  </a-form-item>
+                </a-col>
+                <a-col :lg="24" :md="6" :sm="6">
+                  <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="8" data-title="收款账户"
+                               data-intro="收款账户的信息来自基本资料菜单下的【结算账户】">
+                    <span slot="label" style="font-size: 20px;line-height:20px">收款账户</span>
+                    <a-select placeholder="选择收款账户" style="font-size:20px;" v-model:value="formState.accountReceivable" :dropdownMatchSelectWidth="false">
+                      <div slot="dropdownRender" slot-scope="menu">
+                        <v-nodes :vnodes="menu" />
+                        <a-divider style="margin: 4px 0;" />
+                        <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
+                             @mousedown="e => e.preventDefault()" @click="addAccount"><a-icon type="plus" /> 新增结算账户</div>
+                      </div>
+                      <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">
+                        {{ item.name }}
+                      </a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-col>
+          </div>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {UploadOutlined} from '@ant-design/icons-vue';
+import { Dayjs } from 'dayjs';
+import {
+  Textarea,
+  DatePicker,
+  Button,
+  Checkbox,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Modal,
+  Row,
+  Select,
+  SelectOption,
+  Spin,
+  Table,
+  TabPane,
+  Tabs,
+  Tooltip,
+  TreeSelect,
+  Upload,
+} from "ant-design-vue";
+import {formState, tableColumns} from '/@/views/retail/shipments/model/addEditModel'
+
+export default defineComponent({
+  name: 'AddEditModal',
+  emits: ['success', 'cancel', 'error'],
+  components: {
+    'a-modal': Modal,
+    'a-upload': Upload,
+    'a-button': Button,
+    'a-spin': Spin,
+    'a-row': Row,
+    'a-col': Col,
+    'a-form': Form,
+    'a-form-item': FormItem,
+    'a-input': Input,
+    'a-input-number': InputNumber,
+    'a-select': Select,
+    'a-select-option': SelectOption,
+    'a-tree-select': TreeSelect,
+    'a-checkbox': Checkbox,
+    'a-tooltip': Tooltip,
+    'a-tabs': Tabs,
+    'a-tab-pane': TabPane,
+    'a-table': Table,
+    'a-textarea': Textarea,
+    'a-date-picker': DatePicker,
+    'upload-outlined': UploadOutlined,
+  },
+  setup(_, context) {
+    const confirmLoading = ref<boolean>(false);
+    const open = ref<boolean>(false);
+    const checkFlag = ref<boolean>(true);
+    const isCanCheck = ref<boolean>(true);
+    const isTenant = ref<boolean>(true);
+    const scanStatus = ref<boolean>(true);
+    const title = ref<string>("操作");
+    const width = ref('1300px');
+    const moreStatus = ref<boolean>(true);
+    const addDefaultRowNum = ref(1);
+    const visible = ref<boolean>(true);
+    const prefixNo = ref('LSCK');
+    const fileList = ref([]);
+    const payTypeList = ref([]);
+    const minWidth = ref(1100);
+    const model = ref({});
+    const tableData = ref([])
+    const labelCol = ref({
+      xs: {span: 24},
+      sm: {span: 8},
+    });
+    const wrapperCol = ref({
+      xs: {span: 24},
+      sm: {span: 16},
+    });
+    const refKey = ref(['productDataTable']);
+    const activeKey = ref('productDataTable');
+
+    const memberList = ref([])
+    const accountList = ref([]);
+
+    function handleCancelModal() {
+      close();
+      open.value = false;
+      context.emit('cancel');
+    }
+
+    function openAddEditModal(id: string | undefined) {
+      open.value = true
+      console.info(id)
+    }
+
+    function handleOkModal() {
+
+    }
+
+    function onChangePaymentAmount() {
+
+    }
+
+    const dateChange = (value: Dayjs, dateString: string) => {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    };
+
+    const dateOk = (value: Dayjs) => {
+      console.log('onOk: ', value);
+    };
+
+
+    function scanPressEnter() {
+
+    }
+
+    function scanEnter() {
+
+    }
+
+    function stopScan() {
+
+    }
+
+    function addAccount() {
+
+    }
+
+    function addWarehouse() {
+
+    }
+
+    function handleBatchSetWarehouse() {
+
+    }
+
+    return {
+      open,
+      checkFlag,
+      isCanCheck,
+      isTenant,
+      scanStatus,
+      confirmLoading,
+      handleCancelModal,
+      openAddEditModal,
+      handleOkModal,
+      tableColumns,
+      tableData,
+      formState,
+      title,
+      width,
+      moreStatus,
+      addDefaultRowNum,
+      visible,
+      prefixNo,
+      fileList,
+      payTypeList,
+      minWidth,
+      model,
+      labelCol,
+      wrapperCol,
+      refKey,
+      activeKey,
+      onChangePaymentAmount,
+      dateChange,
+      dateOk,
+      scanPressEnter,
+      scanEnter,
+      stopScan,
+      addAccount,
+      memberList,
+      accountList,
+      addWarehouse,
+      handleBatchSetWarehouse
+    };
+  },
+});
+
+</script>
+
+<style scoped>
+.sign .ant-input{
+  font-size: 30px;
+  font-weight:bolder;
+  text-align:center;
+  border-left-width:0 !important;
+  border-top-width:0 !important;
+  border-right-width:0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/retail/shipments/components/DetailInfoModal.vue b/src/views/retail/shipments/components/DetailInfoModal.vue
new file mode 100644
index 0000000..5ff38f5
--- /dev/null
+++ b/src/views/retail/shipments/components/DetailInfoModal.vue
@@ -0,0 +1,7 @@
+<template>
+
+</template>
+
+<script lang="ts">
+
+</script>
\ No newline at end of file
diff --git a/src/views/retail/shipments/index.vue b/src/views/retail/shipments/index.vue
new file mode 100644
index 0000000..daf241e
--- /dev/null
+++ b/src/views/retail/shipments/index.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增</a-button>
+        <a-button type="primary" @click="handleBatchDelete"> 批量删除</a-button>
+        <a-button type="primary" @click="handleExport"> 导出</a-button>
+        <a-button type="primary" @click=""> 审核</a-button>
+        <a-button type="primary" @click=""> 反审核</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+              :actions="[
+              {
+                icon: 'clarity:info-standard-line',
+                tooltip: t('sys.user.viewUserDetails'),
+                onClick: handleView.bind(null, record),
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <AddEditModal ref="addEditModalRef" @cancel="handleCancel"></AddEditModal>
+  </div>
+</template>
+<div>
+</div>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {useMessage} from "@/hooks/web/useMessage";
+import {columns, searchFormSchema} from "@/views/retail/shipments/shipments.data";
+import {exportXlsx} from "@/api/basic/common";
+import {useI18n} from "vue-i18n";
+import AddEditModal from "@/views/retail/shipments/components/AddEditModal.vue"
+
+export default defineComponent({
+  name: 'Shipments',
+  components: {TableAction, BasicTable, AddEditModal},
+  setup() {
+    const { t } = useI18n();
+    const { createMessage } = useMessage();
+    const addEditModalRef = ref(null);
+    const [registerTable, { reload, getSelectRows }] = useTable({
+      title: '零售出库列表',
+      rowKey: 'id',
+      columns: columns,
+      rowSelection: {
+        type: 'checkbox',
+      },
+      formConfig: {
+        labelWidth: 110,
+        schemas: searchFormSchema,
+      },
+      bordered: true,
+      tableSetting: { fullScreen: true },
+      useSearchForm: true,
+      clickToRowSelect: false,
+      showTableSetting: true,
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: undefined,
+      },
+    });
+
+    function handleCreate() {
+      addEditModalRef.value.title = '新增-零售出库';
+      addEditModalRef.value.openAddEditModal();
+    }
+
+    async function handleBatchDelete() {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+    }
+
+    function handleEdit(record: Recordable) {
+    }
+
+    async function handleDelete(record: Recordable) {
+    }
+
+    async function handleSuccess() {
+      await reload();
+    }
+
+    async function handleOnStatus(newStatus: number) {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+    }
+
+    async function handleCancel() {
+      await reload();
+    }
+
+    async function handleOk() {
+      await reload();
+    }
+
+    function handleView(){
+
+    }
+
+    function handleBatchShipmentsInfo() {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+    }
+
+    const getTimestamp = (date) => {
+      return (
+          date.getFullYear() * 10000000000 +
+          (date.getMonth() + 1) * 100000000 +
+          date.getDate() * 1000000 +
+          date.getHours() * 10000 +
+          date.getMinutes() * 100 +
+          date.getSeconds()
+      ).toString();
+    };
+
+    async function handleExport() {
+      const file = await exportXlsx("零售出库列表")
+      const blob = new Blob([file]);
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      const timestamp = getTimestamp(new Date());
+      link.download = "零售出库数据" + timestamp + ".xlsx";
+      link.target = "_blank";
+      link.click();
+    }
+
+
+    return {
+      t,
+      addEditModalRef,
+      registerTable,
+      handleCreate,
+      handleDelete,
+      handleBatchDelete,
+      handleEdit,
+      handleSuccess,
+      handleOnStatus,
+      handleCancel,
+      handleView,
+      handleOk,
+      handleExport,
+    }
+  }
+})
+</script>
\ No newline at end of file