朱园亮 / erp-mobile · Commits

Commit 77e1c7c6bcf8f3432b61f1bf33bb6a3dde1c143f

Authored by 史婷婷
1 parent b3051b04

feat: 延期发货单-详情&取消

Inline Side-by-side
Showing 4 changed files with 1061 additions and 1 deletions
... ... @@ -666,6 +666,14 @@
666 666 }
667 667 },
668 668 {
  669 + "path": "pages/delay_invoice/detail",
  670 + "style": {
  671 + "navigationBarTitleText": "延期发货单详情",
  672 + "navigationBarBackgroundColor": "#ffffff",
  673 + "navigationBarTextStyle": "black"
  674 + }
  675 + },
  676 + {
669 677 "path": "pages/draft_order/index",
670 678 "style": {
671 679 "navigationBarTitleText": "草稿要车单",
... ...
  1 +<template>
  2 + <view class="page">
  3 + <scroll-view class="scroll" scroll-y>
  4 + <view class="detail-page">
  5 + <view class="section">
  6 + <text class="row company">{{ form.deptName }}</text>
  7 + <view :class="['status', `status_${form.status}`]" />
  8 + <view class="row"><text class="label">要车日期</text><text class="value">{{ form.applyDate }}</text></view>
  9 + </view>
  10 +
  11 + <!-- 产品 -->
  12 + <view class="section2">
  13 + <Product mode="view" :list="form.delayedShipmentDetailList"
  14 + />
  15 + </view>
  16 + </view>
  17 + </scroll-view>
  18 + <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
  19 + </view>
  20 +</template>
  21 +
  22 +<script>
  23 +import { getDetailApi, cancelApi } from '@/api/delay_invoice.js'
  24 +import Product from './product.vue'
  25 +import DetailButtons from '@/components/detail-buttons/index.vue'
  26 +
  27 +export default {
  28 + name: 'DelayInvoiceDetail',
  29 + components: { Product, DetailButtons },
  30 + data() {
  31 + return {
  32 + form: {},
  33 + buttons: [
  34 + { text: '编辑', visible: true, variant: 'outline', event: 'edit' },
  35 + { text: '审核详情', visible: true, variant: 'outline', event: 'auditDetail' },
  36 + { text: '审核', visible: true, variant: 'primary', event: 'audit' },
  37 + { text: '取消', visible: true, variant: 'outline', event: 'cancel', style: { color: 'rgba(0,0,0,0.9)', border: '1px solid #DCDCDC' } },
  38 + ]
  39 + }
  40 + },
  41 + computed: {
  42 + statusFlags() {
  43 + const m = this.form || {}
  44 + const e = String(m.status || '')
  45 + return {
  46 + isRefuse: e === 'REFUSE' || false,
  47 + isAudit: e === 'AUDIT' || false,
  48 + canEdit: e === 'REFUSE' && m.delayedCreateBy || false,
  49 + canAudit: e === 'AUDIT' && m.showExamine || false,
  50 + canCancel: e === 'REFUSE' && m.delayedCreateBy || false,
  51 + }
  52 + },
  53 + displayButtons() {
  54 + const f = this.statusFlags
  55 + return [
  56 + { ...this.buttons[0], visible: f.canEdit && this.$auth.hasPermi('shipping-plan-manage:delay-invoice:modify') },
  57 + { ...this.buttons[1], visible: this.$auth.hasPermi('shipping-plan-manage:delay-invoice:review') },
  58 + { ...this.buttons[2], visible: f.canAudit && this.$auth.hasPermi('shipping-plan-manage:delay-invoice:approve') },
  59 + { ...this.buttons[3], visible: f.canCancel && this.$auth.hasPermi('shipping-plan-manage:delay-invoice:cancel') },
  60 + ]
  61 + }
  62 + },
  63 + onLoad(query) {
  64 + const id = (query && (query.id || query.code)) || ''
  65 + if (id) this.loadDetail(id)
  66 + },
  67 + methods: {
  68 + async loadDetail(id) {
  69 + try {
  70 + const res = await getDetailApi(id)
  71 + this.form = res.data || {}
  72 + } catch (e) {
  73 + this.form = {}
  74 + }
  75 + },
  76 + handleButtonClick(btn) {
  77 + if (!btn || btn.disabled) return
  78 + const map = {
  79 + edit: () => this.onEdit(),
  80 + auditDetail: () => this.onAuditDetail(),
  81 + audit: () => this.onAudit(),
  82 + fill: () => this.onFill(),
  83 + cancel: () => this.onCancel(),
  84 + }
  85 + const fn = map[btn.event]
  86 + if (typeof fn === 'function') fn()
  87 + },
  88 + onEdit() {
  89 + const id = this.form.id || this.form.code
  90 + if (id) uni.navigateTo({ url: `/pages/delay_invoice/modify?id=${id}` })
  91 + },
  92 + onAuditDetail() {
  93 + uni.setStorageSync('sourceBusinessId', this.form.id)
  94 + uni.navigateTo({ url: '/pages/flow/audit_detail' })
  95 + },
  96 + onAudit() {
  97 + uni.setStorageSync('sourceBusinessId', this.form.id)
  98 + uni.navigateTo({ url: '/pages/flow/audit' })
  99 + },
  100 + onCancel() {
  101 + const id = this.form.id || this.form.code
  102 + if (!id) return
  103 + uni.showModal({
  104 + title: '提示',
  105 + content: '确定要取消该延迟发货单吗？',
  106 + success: async (res) => {
  107 + if (res.confirm) {
  108 + try {
  109 + await cancelApi(id)
  110 + uni.showToast({ title: '取消成功', icon: 'success' })
  111 + setTimeout(() => { uni.redirectTo({ url: '/pages/delay_invoice/index' }) }, 300)
  112 + } catch (e) {
  113 + uni.showToast({ title: (e && e.msg) || '取消失败', icon: 'none' })
  114 + }
  115 + }
  116 + }
  117 + })
  118 + },
  119 + }
  120 +}
  121 +</script>
  122 +
  123 +<style lang="scss" scoped>
  124 +.page {
  125 + display: flex;
  126 + flex-direction: column;
  127 + height: 100vh;
  128 +}
  129 +
  130 +.scroll {
  131 + flex: 1;
  132 + background: #f3f3f3;
  133 +}
  134 +
  135 +.detail-page {
  136 + padding-bottom: 150rpx;
  137 +}
  138 +
  139 +.section {
  140 + padding: 32rpx;
  141 + background: #fff;
  142 + margin-bottom: 20rpx;
  143 + position: relative;
  144 +
  145 + .status {
  146 + position: absolute;
  147 + top: 16rpx;
  148 + right: 52rpx;
  149 + width: 180rpx;
  150 + height: 146rpx;
  151 + background-repeat: no-repeat;
  152 + background-size: 100% 100%;
  153 + background-position: center;
  154 +
  155 + &_AUDIT {
  156 + background-image: url('~@/static/images/dev_manage/status_1.png');
  157 + }
  158 +
  159 + &_PASS {
  160 + background-image: url('~@/static/images/dev_manage/status_2.png');
  161 + }
  162 +
  163 + &_REFUSE {
  164 + background-image: url('~@/static/images/dev_manage/status_3.png');
  165 + }
  166 +
  167 + &_CANCEL {
  168 + background-image: url('~@/static/images/dev_manage/status_4.png');
  169 + }
  170 +
  171 + }
  172 +}
  173 +
  174 +.row {
  175 + display: flex;
  176 + margin-bottom: 28rpx;
  177 +
  178 + &:last-child {
  179 + margin-bottom: 0;
  180 + }
  181 +
  182 + &.company {
  183 + font-size: 36rpx;
  184 + font-weight: 600;
  185 + color: rgba(0, 0, 0, 0.9);
  186 + padding-top: 10rpx;
  187 + margin-bottom: 32rpx;
  188 + line-height: 50rpx;
  189 + }
  190 +
  191 + .label {
  192 + width: 240rpx;
  193 + line-height: 32rpx;
  194 + font-size: 28rpx;
  195 + color: rgba(0, 0, 0, 0.6);
  196 + }
  197 +
  198 + .value {
  199 + flex: 1;
  200 + line-height: 32rpx;
  201 + font-size: 28rpx;
  202 + color: rgba(0, 0, 0, 0.9);
  203 + text-align: right;
  204 + word-break: break-all;
  205 + }
  206 +}
  207 +
  208 +.title-header {
  209 + background-color: #fff;
  210 + display: flex;
  211 + align-items: center;
  212 + padding: 32rpx 32rpx 22rpx;
  213 + border-bottom: 1rpx dashed #f0f0f0;
  214 +
  215 + &_icon {
  216 + width: 32rpx;
  217 + height: 28rpx;
  218 + margin-right: 16rpx;
  219 + }
  220 +
  221 + span {
  222 + color: rgba(0, 0, 0, 0.9);
  223 + font-size: 32rpx;
  224 + line-height: 44rpx;
  225 + font-weight: 600;
  226 + }
  227 +}
  228 +</style>
... ...
... ... @@ -251,7 +251,7 @@ export default {
251 251 if (!id) return
252 252 const query = '?id=' + encodeURIComponent(id)
253 253 uni.navigateTo({
254   - url: '/pages/replenishment_order/detail' + query
  254 + url: '/pages/delay_invoice/detail' + query
255 255 })
256 256 },
257 257 filterStatus(status) {
... ...
  1 +<template>
  2 + <view class="product">
  3 +
  4 + <!-- 新增&详情-产品 -->
  5 + <view class="header bp">
  6 + <image class="opCollapse" src="/static/images/title.png" />
  7 + <text class="title">{{ title || '产品' }}</text>
  8 + <view class="ops">
  9 + <image v-if="mode === 'add'" class="opAdd" @click="onAdd" src="/static/images/plus.png" />
  10 + <view v-if="mode === 'view'" class="op1" @click="toggleViewCollapse">
  11 + <image class="opAdd" :src="collapsedView ? '/static/images/down.png' : '/static/images/up.png'" />
  12 + <text class="op">{{ collapsedView ? '展开' : '收起' }} </text>
  13 + </view>
  14 +
  15 + </view>
  16 + </view>
  17 +
  18 + <view v-if="mode === 'add'" class="section">
  19 + <view v-for="(item, idx) in items" :key="'a-' + idx" class="block">
  20 + <uni-list class="edit-list">
  21 + <uni-list-item title="牌号">
  22 + <template v-slot:footer>
  23 + <uni-easyinput v-model="item.brand" placeholder="请输入牌号" :inputBorder="false" />
  24 + </template>
  25 + </uni-list-item>
  26 + <uni-list-item title="厚度(mm)">
  27 + <template v-slot:footer>
  28 + <uni-easyinput type="digit" v-model="item.thickness" placeholder="请输入厚度"
  29 + :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'thickness')"
  30 + @blur="onNonNegativeNumberBlur(item, idx, 'thickness')" />
  31 + </template>
  32 + </uni-list-item>
  33 + <uni-list-item title="厚度公差上限(mm)">
  34 + <template v-slot:footer>
  35 + <uni-easyinput type="number" v-model="item.thicknessTolPos" placeholder="请输入厚度公差上限"
  36 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'thicknessTolPos')"
  37 + @blur="onRealNumberBlur(item, idx, 'thicknessTolPos')" />
  38 + </template>
  39 + </uni-list-item>
  40 + <uni-list-item title="厚度公差下限(mm)">
  41 + <template v-slot:footer>
  42 + <uni-easyinput type="number" v-model="item.thicknessTolNeg" placeholder="请输入厚度公差下限"
  43 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'thicknessTolNeg')"
  44 + @blur="onRealNumberBlur(item, idx, 'thicknessTolNeg')" />
  45 + </template>
  46 + </uni-list-item>
  47 + <view v-show="!item.collapsed">
  48 + <uni-list-item title="宽度(mm)">
  49 + <template v-slot:footer>
  50 + <uni-easyinput type="digit" v-model="item.width" placeholder="请输入宽度"
  51 + :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'width')"
  52 + @blur="onNonNegativeNumberBlur(item, idx, 'width')" />
  53 + </template>
  54 + </uni-list-item>
  55 + <uni-list-item title="宽度公差上限(mm)">
  56 + <template v-slot:footer>
  57 + <uni-easyinput type="number" v-model="item.widthTolPos" placeholder="请输入宽度公差上限"
  58 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'widthTolPos')"
  59 + @blur="onRealNumberBlur(item, idx, 'widthTolPos')" />
  60 + </template>
  61 + </uni-list-item>
  62 + <uni-list-item title="宽度公差下限(mm)">
  63 + <template v-slot:footer>
  64 + <uni-easyinput type="number" v-model="item.widthTolNeg" placeholder="请输入宽度公差下限"
  65 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'widthTolNeg')"
  66 + @blur="onRealNumberBlur(item, idx, 'widthTolNeg')" />
  67 + </template>
  68 + </uni-list-item>
  69 + <uni-list-item title="长度(mm)">
  70 + <template v-slot:footer>
  71 + <uni-easyinput type="digit" v-model="item.length" placeholder="请输入长度"
  72 + :inputBorder="false" @input="onNonNegativeNumberInput($event, item, idx, 'length')"
  73 + @blur="onNonNegativeNumberBlur(item, idx, 'length')" />
  74 + </template>
  75 + </uni-list-item>
  76 + <uni-list-item title="长度公差上限(mm)">
  77 + <template v-slot:footer>
  78 + <uni-easyinput type="number" v-model="item.lengthTolPos" placeholder="请输入长度公差上限"
  79 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'lengthTolPos')"
  80 + @blur="onRealNumberBlur(item, idx, 'lengthTolPos')" />
  81 + </template>
  82 + </uni-list-item>
  83 + <uni-list-item title="长度公差下限(mm)">
  84 + <template v-slot:footer>
  85 + <uni-easyinput type="number" v-model="item.lengthTolNeg" placeholder="请输入长度公差下限"
  86 + :inputBorder="false" @input="onRealNumberInput($event, item, idx, 'lengthTolNeg')"
  87 + @blur="onRealNumberBlur(item, idx, 'lengthTolNeg')" />
  88 + </template>
  89 + </uni-list-item>
  90 + <uni-list-item title="状态">
  91 + <template v-slot:footer>
  92 + <uni-easyinput v-model="item.status" placeholder="请输入状态" :inputBorder="false" />
  93 + </template>
  94 + </uni-list-item>
  95 + <uni-list-item title="需发数量(kg)">
  96 + <template v-slot:footer>
  97 + <uni-easyinput type="digit" v-model="item.quantity" placeholder="请输入数量kg"
  98 + :inputBorder="false"
  99 + @input="onNonNegativeNumberInput($event, item, idx, 'quantity')"
  100 + @blur="onNonNegativeNumberBlur(item, idx, 'quantity')" />
  101 + </template>
  102 + </uni-list-item>
  103 + <uni-list-item title="实发数量(kg)">
  104 + <template v-slot:footer>
  105 + <uni-easyinput type="digit" v-model="item.shippedQuantity" placeholder="请输入实发数量kg"
  106 + :inputBorder="false"
  107 + @input="onNonNegativeNumberInput($event, item, idx, 'shippedQuantity')"
  108 + @blur="onNonNegativeNumberBlur(item, idx, 'shippedQuantity')" />
  109 + </template>
  110 + </uni-list-item>
  111 + <uni-list-item title="需求补货数量(kg)">
  112 + <template v-slot:footer>
  113 + <uni-easyinput type="digit" v-model="item.supplementaryQuantity"
  114 + placeholder="请输入需求补货数量kg" :inputBorder="false"
  115 + @input="onNonNegativeNumberInput($event, item, idx, 'supplementaryQuantity')"
  116 + @blur="onNonNegativeNumberBlur(item, idx, 'supplementaryQuantity')" />
  117 + </template>
  118 + </uni-list-item>
  119 + <uni-list-item class="amount-item">
  120 + <template v-slot:body>
  121 + <view class="item-title"><text>单价</text></view>
  122 + </template>
  123 + <template v-slot:footer>
  124 + <view class="amount-row">
  125 + <uni-easyinput type="digit" v-model="item.salesPrice" placeholder="0.00"
  126 + :inputBorder="false"
  127 + @input="onNonNegativeNumberInput($event, item, idx, 'salesPrice')"
  128 + @blur="onNonNegativeNumberBlur(item, idx, 'salesPrice')" />
  129 + <text class="unit">元</text>
  130 + </view>
  131 + </template>
  132 + </uni-list-item>
  133 + <uni-list-item class="amount-item">
  134 + <template v-slot:body>
  135 + <view class="item-title"><text>包装费</text></view>
  136 + </template>
  137 + <template v-slot:footer>
  138 + <view class="amount-row">
  139 + <uni-easyinput type="digit" v-model="item.packagingFee" placeholder="0.00"
  140 + :inputBorder="false"
  141 + @input="onNonNegativeNumberInput($event, item, idx, 'packagingFee')"
  142 + @blur="onNonNegativeNumberBlur(item, idx, 'packagingFee')" />
  143 + <text class="unit">元</text>
  144 + </view>
  145 + </template>
  146 + </uni-list-item>
  147 + <uni-list-item title="生产科（车间）确认交付时间">
  148 + <template v-slot:footer>
  149 + <view class="value">{{ item.confirmedDeliveryDate }}</view>
  150 + </template>
  151 + </uni-list-item>
  152 + <uni-list-item title="备注">
  153 + <template v-slot:footer>
  154 + <uni-easyinput v-model="item.remarks" placeholder="请输入备注" :inputBorder="false" />
  155 + </template>
  156 + </uni-list-item>
  157 + </view>
  158 + </uni-list>
  159 +
  160 + <view class="block-ops">
  161 + <div class="del" @click="onRemove(item.purchaseOrderId)">
  162 + <image src="/static/images/delete.png" class="icon" />
  163 + 删除
  164 + </div>
  165 + <div class="toggle" @click="toggleItem(idx)">
  166 + <image :src="item.collapsed ? '/static/images/up.png' : '/static/images/down.png'"
  167 + class="icon" />
  168 + {{ item.collapsed ? '展开' : '收起' }}
  169 + </div>
  170 + </view>
  171 + </view>
  172 + </view>
  173 +
  174 + <view v-else-if="mode === 'view'" class="view-list" v-show="!collapsedView">
  175 + <view v-for="(item, idx) in items" :key="'v-' + idx" class="card">
  176 + <view class="row"><text class="label">订单编号</text><text class="value">{{ item.orderNo }}</text></view>
  177 + <view class="row"><text class="label">原订单计划发货日期</text><text class="value">{{ item.deliveryDate }}</text>
  178 + </view>
  179 + <view class="row"><text class="label">现申请发货日期</text><text class="value">{{ item.applyShipmentDate
  180 + }}</text>
  181 + </view>
  182 + <view class="row"><text class="label">申请次数</text><text class="value">{{ item.applyCount
  183 + }}</text>
  184 + </view>
  185 + <view class="row"><text class="label">订单类型</text><text class="value">{{ item.orderType
  186 + }}</text></view>
  187 + <view class="row"><text class="label">所属分厂</text><text class="value">{{ item.workshopName }}</text>
  188 + </view>
  189 + <view class="row"><text class="label">客户名称</text><text class="value">{{
  190 + item.customerName }}</text></view>
  191 + <view class="row"><text class="label">发货数量</text><text class="value">{{
  192 + item.quantity
  193 + }}</text>
  194 + </view>
  195 + <view class="row"><text class="label">延期原因</text><text class="value">{{ item.delayReason }}</text>
  196 + </view>
  197 + </view>
  198 + </view>
  199 +
  200 + </view>
  201 +</template>
  202 +<script>
  203 +import { uuid } from '@/utils/uuid.js'
  204 +export default {
  205 + name: 'Product',
  206 + props: {
  207 + title: { type: String, default: '' },
  208 + mode: { type: String, default: 'add' },
  209 + list: { type: Array, default: () => [] },
  210 + },
  211 + data() {
  212 + return {
  213 + items: [],
  214 + collapsedView: false,
  215 + roleCodes: [],
  216 + }
  217 + },
  218 + computed: {
  219 + },
  220 + watch: {
  221 + items: {
  222 + handler() { this.emitChange() },
  223 + deep: true
  224 + },
  225 + list: {
  226 + handler(v) {
  227 + const arr = Array.isArray(v) ? v : []
  228 + this.items = arr.map(x => {
  229 + const it = { ...this.defaultItem(), ...x, collapsed: true }
  230 + return it
  231 + })
  232 + },
  233 + deep: true
  234 + },
  235 + },
  236 + created() {
  237 + const init = Array.isArray(this.list) && this.list.length > 0 ? this.list.map(v => ({ ...this.defaultItem(), ...v, collapsed: false })) : [{ ...this.defaultItem(), collapsed: false }]
  238 + this.items = init;
  239 + },
  240 + methods: {
  241 + defaultItem() {
  242 + return {
  243 + purchaseOrderId: uuid(),
  244 + collapsed: false,
  245 + id: '',
  246 + orderNo: '',
  247 + deliveryDate: '',
  248 + applyShipmentDate: '',
  249 + applyCount: '',
  250 + orderType: '',
  251 + workshopName: '',
  252 + customerName: '',
  253 + quantity: '',
  254 + delayReason: '',
  255 + }
  256 + },
  257 +
  258 + onAdd() {
  259 + const obj = this.defaultItem()
  260 + obj.collapsed = true
  261 + this.items.push(obj)
  262 + this.emitChange()
  263 + },
  264 + onRemove(id) {
  265 + if (!id) return
  266 + uni.showModal({
  267 + title: '系统提示',
  268 + content: '是否确定删除选中的产品？',
  269 + confirmText: '确定',
  270 + cancelText: '取消',
  271 + success: (res) => {
  272 + if (res && res.confirm) {
  273 + const i = this.items.findIndex(it => String(it.purchaseOrderId) === String(id))
  274 + if (i >= 0) {
  275 + this.items.splice(i, 1)
  276 + this.emitChange()
  277 + }
  278 + }
  279 + }
  280 + })
  281 + },
  282 + toggleItem(idx) {
  283 + const it = this.items[idx]
  284 + if (!it) return
  285 + it.collapsed = !it.collapsed
  286 + this.$set(this.items, idx, it)
  287 + },
  288 + emitChange() {
  289 + const out = this.items.map(it => ({ ...it }))
  290 + this.$emit('input', out)
  291 + this.$emit('update:value', out)
  292 + this.$emit('change', out)
  293 + },
  294 + onNonNegativeNumberInput(val, item, idx, field) {
  295 + let v = String(val != null ? val : (item && item[field]) || '')
  296 + v = v.replace(/[^0-9.]/g, '')
  297 + v = v.replace(/(\..*)\./g, '$1')
  298 + if (v.startsWith('.')) v = '0' + v
  299 + if (v === '') { item[field] = ''; if (typeof idx === 'number') this.$set(this.items, idx, { ...item }); return }
  300 + const num = Number(v)
  301 + if (isNaN(num) || num < 0) {
  302 + item[field] = '0'
  303 + } else {
  304 + item[field] = v
  305 + }
  306 + if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
  307 + },
  308 + onNonNegativeNumberBlur(item, idx, field) {
  309 + const v = String((item && item[field]) || '')
  310 + const num = Number(v)
  311 + if (isNaN(num) || num < 0) item[field] = '0'
  312 + if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
  313 + },
  314 + onRealNumberInput(val, item, idx, field) {
  315 + let s = String(val != null ? val : (item && item[field]) || '')
  316 + const neg = s.trim().startsWith('-')
  317 + s = s.replace(/[^0-9.\-]/g, '')
  318 + s = s.replace(/(?!^)-/g, '')
  319 + s = s.replace(/(\..*)\./g, '$1')
  320 + if (s.startsWith('.')) s = '0' + s
  321 + if (s.startsWith('-.')) s = '-0.' + s.slice(2)
  322 + if (neg && !s.startsWith('-')) s = '-' + s.replace(/-/g, '')
  323 + item[field] = s
  324 + if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
  325 + },
  326 + onRealNumberBlur(item, idx, field) {
  327 + const s = String((item && item[field]) || '')
  328 + if (s === '') { if (typeof idx === 'number') this.$set(this.items, idx, { ...item }); return }
  329 + const n = Number(s)
  330 + if (isNaN(n)) item[field] = ''
  331 + if (typeof idx === 'number') this.$set(this.items, idx, { ...item })
  332 + },
  333 + toggleViewCollapse() {
  334 + this.collapsedView = !this.collapsedView
  335 + },
  336 + onDeliveryChange(e, item, idx) {
  337 + const getStr = (x) => {
  338 + if (x && x.detail && x.detail.value !== undefined) return x.detail.value
  339 + if (typeof x === 'string') return x
  340 + return item && item.deliveryDate ? item.deliveryDate : ''
  341 + }
  342 + const val = getStr(e)
  343 + if (!val || !this.orderDate) return
  344 + const parse = (s) => {
  345 + const p = String(s).replace(/\//g, '-').split('-')
  346 + const y = Number(p[0])
  347 + const m = Number(p[1])
  348 + const d = Number(p[2])
  349 + return new Date(y, m - 1, d)
  350 + }
  351 + const sel = parse(val)
  352 + const ord = parse(this.orderDate)
  353 + if (!(sel > ord)) {
  354 + item.deliveryDate = ''
  355 + this.$set(this.items, idx, { ...item })
  356 + uni.showToast({ title: '发货日期必须大于订货日期', icon: 'none' })
  357 + }
  358 + }
  359 + }
  360 +}
  361 +</script>
  362 +<style lang="scss" scoped>
  363 +.header {
  364 + background-color: #fff;
  365 + display: flex;
  366 + align-items: center;
  367 + padding: 24rpx 32rpx;
  368 +
  369 + &.bp {
  370 + border-bottom: 1px solid #f0f0f0;
  371 + }
  372 +}
  373 +
  374 +.dot {
  375 + width: 16rpx;
  376 + height: 16rpx;
  377 + background: #3D48A3;
  378 + border-radius: 50%;
  379 + margin-right: 12rpx;
  380 +}
  381 +
  382 +.title {
  383 + font-size: 32rpx;
  384 + color: rgba(0, 0, 0, 0.9);
  385 + font-weight: 600;
  386 +}
  387 +
  388 +.ops {
  389 + margin-left: auto;
  390 +}
  391 +
  392 +.op {
  393 + color: $theme-primary;
  394 + font-size: 28rpx;
  395 + margin-left: 8rpx;
  396 +}
  397 +
  398 +.op1 {
  399 + display: flex;
  400 + align-items: center;
  401 +}
  402 +
  403 +.opAdd {
  404 + color: rgba(0, 0, 0, 0.6);
  405 + width: 40rpx;
  406 + height: 40rpx;
  407 +}
  408 +
  409 +.opCollapse {
  410 + color: rgba(0, 0, 0, 0.6);
  411 + width: 32rpx;
  412 + height: 28rpx;
  413 + margin-right: 16rpx;
  414 +}
  415 +
  416 +::v-deep .uni-list {
  417 + background: transparent;
  418 +
  419 + .uni-list--border-top {
  420 + background-color: transparent !important;
  421 + }
  422 +
  423 + &-item {
  424 + &__extra-text {
  425 + font-size: 32rpx;
  426 + }
  427 +
  428 + &__content-title {
  429 + font-size: 32rpx;
  430 + color: rgba(0, 0, 0, 0.9);
  431 + }
  432 +
  433 + &__container {
  434 + padding: 32rpx;
  435 +
  436 + .uni-easyinput {
  437 +
  438 + .is-disabled {
  439 + background-color: transparent !important;
  440 + }
  441 +
  442 + &__placeholder-class {
  443 + font-size: 32rpx;
  444 + color: rgba(0, 0, 0, 0.4);
  445 + }
  446 +
  447 + &__content {
  448 + border: none;
  449 +
  450 + &-input {
  451 + padding-left: 0 !important;
  452 + height: 48rpx;
  453 + line-height: 48rpx;
  454 + font-size: 32rpx;
  455 + }
  456 +
  457 + .content-clear-icon {
  458 + font-size: 44rpx !important;
  459 + }
  460 + }
  461 + }
  462 +
  463 + .amount-row {
  464 + flex: 1;
  465 + display: flex;
  466 + align-items: center;
  467 +
  468 + .uni-easyinput {
  469 + flex: 1;
  470 + }
  471 +
  472 + .unit {
  473 + margin-left: 16rpx;
  474 + color: rgba(0, 0, 0, 0.9);
  475 + }
  476 + }
  477 +
  478 + .item-title,
  479 + .uni-list-item__content {
  480 + flex: none;
  481 + min-height: 48rpx;
  482 + line-height: 48rpx;
  483 + font-size: 32rpx;
  484 + position: relative;
  485 + width: 210rpx;
  486 + margin-right: 32rpx;
  487 + color: rgba(0, 0, 0, 0.9);
  488 + padding-right: 0;
  489 +
  490 +
  491 + .required {
  492 + color: red;
  493 + position: absolute;
  494 + top: 50%;
  495 + transform: translateY(-50%);
  496 + left: -16rpx;
  497 + }
  498 + }
  499 +
  500 + }
  501 +
  502 + &.select-item {
  503 + &.is-empty {
  504 + .uni-list-item__extra-text {
  505 + color: rgba(0, 0, 0, 0.4) !important;
  506 + }
  507 + }
  508 +
  509 + &.is-filled {
  510 + .uni-list-item__extra-text {
  511 + color: rgba(0, 0, 0, 0.9) !important;
  512 + }
  513 + }
  514 +
  515 + .serial-number-row {
  516 + display: flex;
  517 + align-items: center;
  518 + }
  519 +
  520 + }
  521 +
  522 + &.mgb10 {
  523 + margin-bottom: 20rpx;
  524 + }
  525 +
  526 + }
  527 +
  528 + .title-header {
  529 + background-color: #fff;
  530 + display: flex;
  531 + align-items: center;
  532 + padding: 32rpx 32rpx 22rpx;
  533 +
  534 + &_icon {
  535 + width: 32rpx;
  536 + height: 28rpx;
  537 + margin-right: 16rpx;
  538 + }
  539 +
  540 + span {
  541 + color: rgba(0, 0, 0, 0.9);
  542 + font-size: 32rpx;
  543 + line-height: 44rpx;
  544 + font-weight: 600;
  545 + }
  546 + }
  547 +}
  548 +
  549 +/* 只读 easyinput 根据内容自适应高度 */
  550 +::v-deep .uni-list-item__container {
  551 + align-items: flex-start;
  552 +}
  553 +
  554 +.block-ops {
  555 + display: flex;
  556 + padding: 20rpx 32rpx 20rpx;
  557 + justify-content: space-around;
  558 +}
  559 +
  560 +.del {
  561 + color: #D54941;
  562 + font-size: 28rpx;
  563 + display: flex;
  564 + align-items: center;
  565 +
  566 + image {
  567 + width: 40rpx;
  568 + height: 40rpx;
  569 + }
  570 +}
  571 +
  572 +.toggle {
  573 + color: $theme-primary;
  574 + font-size: 28rpx;
  575 + display: flex;
  576 + align-items: center;
  577 +
  578 + image {
  579 + width: 40rpx;
  580 + height: 40rpx;
  581 + }
  582 +}
  583 +
  584 +.section {
  585 + background: #f1f1f1;
  586 + margin-bottom: 20rpx;
  587 +
  588 + .block {
  589 + background: #ffffff;
  590 + // padding: 32rpx 0;
  591 + margin-bottom: 20rpx;
  592 +
  593 + &:last-child {
  594 + margin-bottom: 0;
  595 + }
  596 + }
  597 +
  598 + .row {
  599 + display: flex;
  600 + // margin-bottom: 24rpx;
  601 + line-height: 32rpx;
  602 + padding: 32rpx;
  603 + border-bottom: 1rpx solid #f2f2f2;
  604 +
  605 +
  606 + &.noneStyle {
  607 + border-bottom: 0;
  608 + border-bottom: none;
  609 + }
  610 +
  611 + &.row-spec {
  612 + align-items: center;
  613 + }
  614 + }
  615 +
  616 + .row:last-child {
  617 + margin-bottom: 0;
  618 + }
  619 +
  620 + .label {
  621 + width: 210rpx;
  622 + margin-right: 32rpx;
  623 + color: rgba(0, 0, 0, 0.9);
  624 + font-size: 32rpx;
  625 + line-height: 48rpx;
  626 + }
  627 +
  628 + .value {
  629 + flex: 1;
  630 + color: rgba(0, 0, 0, 0.9);
  631 + font-size: 32rpx;
  632 + white-space: pre-wrap;
  633 + word-break: break-all;
  634 + line-height: 48rpx;
  635 + }
  636 +
  637 + .value-spec {
  638 + height: 48rpx;
  639 + display: flex;
  640 + align-items: center;
  641 + color: #000000;
  642 +
  643 + &_box {
  644 + position: relative;
  645 + width: 60rpx;
  646 + height: 48rpx;
  647 +
  648 + &_1 {
  649 + font-size: 16rpx;
  650 + position: absolute;
  651 + top: -10rpx;
  652 + left: 0;
  653 + }
  654 +
  655 + &_2 {
  656 + font-size: 16rpx;
  657 + position: absolute;
  658 + bottom: -10rpx;
  659 + left: 0;
  660 + }
  661 + }
  662 +
  663 + &_val {
  664 + font-size: 28rpx;
  665 +
  666 + &.p12 {
  667 + padding-right: 12rpx;
  668 + }
  669 + }
  670 + }
  671 +
  672 + .view-total {
  673 + padding-top: 20rpx;
  674 +
  675 + .head {
  676 + font-size: 32rpx;
  677 + font-weight: 600;
  678 + line-height: 50rpx;
  679 + color: rgba(0, 0, 0, 0.9);
  680 + padding-bottom: 16rpx;
  681 + margin-bottom: 24rpx;
  682 + border-bottom: 1px dashed #E7E7E7;
  683 + }
  684 +
  685 + .row {
  686 + display: flex;
  687 + margin-bottom: 24rpx;
  688 + line-height: 32rpx;
  689 +
  690 + .label {
  691 + width: 180rpx;
  692 + margin-right: 14rpx;
  693 + color: rgba(0, 0, 0, 0.6);
  694 + font-size: 28rpx;
  695 + }
  696 +
  697 + .value {
  698 + flex: 1;
  699 + color: rgba(0, 0, 0, 0.9);
  700 + font-size: 28rpx;
  701 + white-space: pre-wrap;
  702 + word-break: break-all;
  703 + }
  704 + }
  705 + }
  706 +}
  707 +
  708 +
  709 +.view-list {
  710 + padding: 26rpx 32rpx;
  711 + background: #ffffff;
  712 +
  713 + .card {
  714 + background: #f3f3f3;
  715 + border-radius: 16rpx;
  716 + padding: 32rpx 44rpx;
  717 + margin-bottom: 20rpx;
  718 +
  719 + &:last-child {
  720 + margin-bottom: 0;
  721 + }
  722 + }
  723 +
  724 + .row {
  725 + display: flex;
  726 + margin-bottom: 24rpx;
  727 + line-height: 32rpx;
  728 +
  729 + &.row-spec {
  730 + height: 60rpx;
  731 + align-items: center;
  732 + }
  733 + }
  734 +
  735 + .row:last-child {
  736 + margin-bottom: 0;
  737 + }
  738 +
  739 + .label {
  740 + width: 260rpx;
  741 + margin-right: 14rpx;
  742 + color: rgba(0, 0, 0, 0.6);
  743 + font-size: 28rpx;
  744 + }
  745 +
  746 + .value {
  747 + flex: 1;
  748 + color: rgba(0, 0, 0, 0.9);
  749 + font-size: 28rpx;
  750 + white-space: pre-wrap;
  751 + word-break: break-all;
  752 + }
  753 +
  754 + .value-spec {
  755 + height: 60rpx;
  756 + display: flex;
  757 + align-items: center;
  758 + color: #000000;
  759 +
  760 + &_box {
  761 + position: relative;
  762 + width: 60rpx;
  763 + height: 60rpx;
  764 +
  765 + &_1 {
  766 + font-size: 16rpx;
  767 + position: absolute;
  768 + top: 0;
  769 + left: 0;
  770 + }
  771 +
  772 + &_2 {
  773 + font-size: 16rpx;
  774 + position: absolute;
  775 + bottom: 0;
  776 + left: 0;
  777 + }
  778 + }
  779 +
  780 + &_val {
  781 + font-size: 28rpx;
  782 +
  783 + &.p12 {
  784 + padding-right: 12rpx;
  785 + }
  786 + }
  787 + }
  788 +
  789 + .view-total {
  790 + padding-top: 20rpx;
  791 +
  792 + .head {
  793 + font-size: 32rpx;
  794 + font-weight: 600;
  795 + line-height: 50rpx;
  796 + color: rgba(0, 0, 0, 0.9);
  797 + padding-bottom: 16rpx;
  798 + margin-bottom: 24rpx;
  799 + border-bottom: 1px dashed #E7E7E7;
  800 + }
  801 +
  802 + .row {
  803 + display: flex;
  804 + margin-bottom: 24rpx;
  805 + line-height: 32rpx;
  806 +
  807 + .label {
  808 + width: 180rpx;
  809 + margin-right: 14rpx;
  810 + color: rgba(0, 0, 0, 0.6);
  811 + font-size: 28rpx;
  812 + }
  813 +
  814 + .value {
  815 + flex: 1;
  816 + color: rgba(0, 0, 0, 0.9);
  817 + font-size: 28rpx;
  818 + white-space: pre-wrap;
  819 + word-break: break-all;
  820 + }
  821 + }
  822 + }
  823 +}
  824 +</style>
... ...