Skip to content
This repository has been archived by the owner on Oct 31, 2023. It is now read-only.

Add retail shipments model views #113

Merged
merged 3 commits into from
Oct 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/views/product/info/info.data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import {useMessage} from "@/hooks/web/useMessage";
import {useI18n} from "@/hooks/web/useI18n";
import {updateProductStatus} from "@/api/product/product";
import {getCategoryList} from "@/api/product/productCategory";
import {FormState, MeTable, ProductInfo, ProductStockModel, Stock} from "@/views/product/info/model/productInfoModel";
import {UnwrapRef} from "vue/dist/vue";
import {AddProductReq, AddProductStockReq} from "@/api/product/model/productModel";
import {MeTable, ProductInfo, Stock} from "@/views/product/info/model/productInfoModel";
import {AddProductReq} from "@/api/product/model/productModel";

const { t } = useI18n();

Expand Down
348 changes: 348 additions & 0 deletions src/views/retail/shipments/components/AddEditModal.vue
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions src/views/retail/shipments/components/DetailInfoModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>

</template>

<script lang="ts">

</script>
Loading