朱园亮 / erp-mobile · Commits

Commit d69a4e5e41556ceb574571eaa9209ce3007df5d8

Authored by 史婷婷
1 parent db0bc6ce

feat: 规格变更单-新增&编辑&查看暂存

Inline Side-by-side
Showing 5 changed files with 2201 additions and 0 deletions
... ... @@ -203,6 +203,27 @@
203 203 "navigationBarBackgroundColor": "#ffffff",
204 204 "navigationBarTextStyle": "black"
205 205 }
  206 + },{
  207 + "path": "pages/change_list/add",
  208 + "style": {
  209 + "navigationBarTitleText": "新增规格变更单",
  210 + "navigationBarBackgroundColor": "#ffffff",
  211 + "navigationBarTextStyle": "black"
  212 + }
  213 + },{
  214 + "path": "pages/change_list/detail",
  215 + "style": {
  216 + "navigationBarTitleText": "查看规格变更单",
  217 + "navigationBarBackgroundColor": "#ffffff",
  218 + "navigationBarTextStyle": "black"
  219 + }
  220 + },{
  221 + "path": "pages/change_list/modify",
  222 + "style": {
  223 + "navigationBarTitleText": "编辑规格变更单",
  224 + "navigationBarBackgroundColor": "#ffffff",
  225 + "navigationBarTextStyle": "black"
  226 + }
206 227 },
207 228 {
208 229 "path": "pages/contract_framework/index",
... ...
  1 +<template>
  2 + <view class="page">
  3 + <scroll-view class="scroll" scroll-y>
  4 + <uni-list>
  5 + <view class="section">
  6 + <uni-list-item title="订单编号">
  7 + <template v-slot:footer>
  8 + <view class="readonly-text">{{ form.orderNo }}</view>
  9 + </template>
  10 + </uni-list-item>
  11 + <uni-list-item title="供货单位">
  12 + <template v-slot:footer>
  13 + <view class="readonly-text">{{ getDicName('SUPPLIER', form.supplyUnit, dicOptions.SUPPLIER) }}</view>
  14 + </template>
  15 + </uni-list-item>
  16 + <uni-list-item title="订货单位">
  17 + <template v-slot:footer>
  18 + <view class="readonly-text">{{ form.orderingUnitName }}</view>
  19 + </template>
  20 + </uni-list-item>
  21 + <uni-list-item title="订货日期">
  22 + <template v-slot:footer>
  23 + <view class="readonly-text">{{ form.orderDate }}</view>
  24 + </template>
  25 + </uni-list-item>
  26 + <uni-list-item title="生产厂">
  27 + <template v-slot:footer>
  28 + <view class="readonly-text">{{ form.workshopName }}</view>
  29 + </template>
  30 + </uni-list-item>
  31 + <uni-list-item title="结算方式或期限">
  32 + <template v-slot:footer>
  33 + <view class="readonly-text">{{ form.settlementTerms }}</view>
  34 + </template>
  35 + </uni-list-item>
  36 +
  37 + <uni-list-item title="交货方式">
  38 + <template v-slot:footer>
  39 + <uni-easyinput v-model="form.deliveryMethod" placeholder="请输入交货方式" :inputBorder="false" />
  40 + </template>
  41 + </uni-list-item>
  42 + </view>
  43 +
  44 + <!-- 产品 -->
  45 + <view class="section2">
  46 + <Product mode="add" :list="initPurchaseOrderLineList" @change="purchaseOrderLineListChange" />
  47 + </view>
  48 +
  49 + <view class="section">
  50 + <uni-list-item title="价格表编号">
  51 + <template v-slot:footer>
  52 + <uni-easyinput v-model="form.priceListNo" placeholder="请输入价格表编号" :inputBorder="false" />
  53 + </template>
  54 + </uni-list-item>
  55 + <uni-list-item title="开票情况">
  56 + <template v-slot:footer>
  57 + <uni-easyinput v-model="form.invoicingStatus" placeholder="请输入开票情况" :inputBorder="false" />
  58 + </template>
  59 + </uni-list-item>
  60 + <uni-list-item class="amount-item">
  61 + <template v-slot:body>
  62 + <view class="item-title"><text>运费</text></view>
  63 + </template>
  64 + <template v-slot:footer>
  65 + <view class="amount-row">
  66 + <uni-easyinput type="number" v-model="form.shippingCost" placeholder="0.00" :inputBorder="false" />
  67 + <text class="unit">元</text>
  68 + </view>
  69 + </template>
  70 + </uni-list-item>
  71 + <uni-list-item class="amount-item">
  72 + <template v-slot:body>
  73 + <view class="item-title"><text>包装费</text></view>
  74 + </template>
  75 + <template v-slot:footer>
  76 + <view class="amount-row">
  77 + <uni-easyinput type="number" v-model="form.packagingFee" placeholder="0.00" :inputBorder="false" />
  78 + <text class="unit">元</text>
  79 + </view>
  80 + </template>
  81 + </uni-list-item>
  82 + <uni-list-item class="select-item" :class="form.executionStandardName ? 'is-filled' : 'is-empty'" clickable
  83 + @click="openSheet('executionStandard')" :rightText="form.executionStandardName || '请选择'" showArrow>
  84 + <template v-slot:body>
  85 + <view class="item-title"><text>执行标准</text></view>
  86 + </template>
  87 + </uni-list-item>
  88 + </view>
  89 +
  90 +
  91 + <view class="title-header">
  92 + <image class="title-header_icon" src="/static/images/title.png" />
  93 + <span>具体质量要求</span>
  94 + </view>
  95 +
  96 + <uni-list-item title="件重条头">
  97 + <template v-slot:footer>
  98 + <uni-easyinput type="textarea" v-model="form.pieceWeightHeader" placeholder="请输入件重条头"
  99 + :inputBorder="false" />
  100 + </template>
  101 + </uni-list-item>
  102 + <uni-list-item title="表面">
  103 + <template v-slot:footer>
  104 + <uni-easyinput type="textarea" v-model="form.surface" placeholder="请输入表面" :inputBorder="false" />
  105 + </template>
  106 + </uni-list-item>
  107 + <uni-list-item title="公差">
  108 + <template v-slot:footer>
  109 + <uni-easyinput type="textarea" v-model="form.tolerance" placeholder="请输入公差" :inputBorder="false" />
  110 + </template>
  111 + </uni-list-item>
  112 + <uni-list-item title="性能">
  113 + <template v-slot:footer>
  114 + <uni-easyinput type="textarea" v-model="form.performance" placeholder="请输入性能" :inputBorder="false" />
  115 + </template>
  116 + </uni-list-item>
  117 + <uni-list-item title="成分">
  118 + <template v-slot:footer>
  119 + <uni-easyinput type="textarea" v-model="form.element" placeholder="请输入成分" :inputBorder="false" />
  120 + </template>
  121 + </uni-list-item>
  122 + <uni-list-item title="包装">
  123 + <template v-slot:footer>
  124 + <uni-easyinput type="textarea" v-model="form.packaging" placeholder="请输入包装" :inputBorder="false" />
  125 + </template>
  126 + </uni-list-item>
  127 + <uni-list-item title="备注">
  128 + <template v-slot:footer>
  129 + <uni-easyinput type="textarea" v-model="form.remarks" placeholder="请输入备注" :inputBorder="false" />
  130 + </template>
  131 + </uni-list-item>
  132 +
  133 +
  134 + </uni-list>
  135 + </scroll-view>
  136 +
  137 + <view class="footer">
  138 + <view class="view-total">
  139 + <view class="head">合计</view>
  140 + <view class="row">
  141 + <text class="label">总数量</text><text class="value">{{ form.totalQuantity }}</text>
  142 + </view>
  143 + </view>
  144 + <button class="btn submit" type="primary" @click="onSubmit">提交</button>
  145 + </view>
  146 + <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
  147 + @confirm="onSheetConfirm" />
  148 + </view>
  149 +</template>
  150 +
  151 +<script>
  152 +import { createApi } from '@/api/change_list.js'
  153 +import Product from './product.vue'
  154 +import SingleSelectSheet from '@/components/single-select/index.vue'
  155 +import { getDicName } from '@/utils/dic.js'
  156 +import { getDicByCodes } from '@/utils/dic'
  157 +
  158 +export default {
  159 + name: 'ChangeListAdd',
  160 + components: { Product, SingleSelectSheet },
  161 + data() {
  162 + return {
  163 + form: {
  164 + code: '',
  165 + supplier: '',
  166 + buyer: '',
  167 + // 默认当前日期 格式为 yyyy-MM-dd
  168 + orderDate: new Date().toISOString().substring(0, 10),
  169 + unit: '',
  170 + totalQuantity: '',
  171 + totalAmountExcludingTax: '',
  172 + totalAmountIncludingTax: '',
  173 + totalAmountCapital: '',
  174 + depositInfo: '',
  175 + packagingRequirements: '',
  176 + paymentTerms: '',
  177 + transportMode: '',
  178 + destinationId: [],
  179 + includesPackagingFee: '',
  180 + includesTransportFee: '',
  181 + designatedConsignee: '',
  182 + specialTerms: '',
  183 + executionStandard: '',
  184 + executionStandardRemarks: '',
  185 + specialInstructions: '',
  186 + remarks: '',
  187 + pieceWeightHead: '',
  188 + surface: '',
  189 + tolerance: '',
  190 + performance: '',
  191 + component: '',
  192 + packaging: '',
  193 + },
  194 + initPurchaseOrderLineList: [],
  195 + dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [] },
  196 + sheet: { visible: false, title: '请选择', options: [], value: '', field: '' }
  197 + }
  198 + },
  199 + onLoad() {
  200 + this.loadDicOptions()
  201 + },
  202 + methods: {
  203 + loadDicOptions() {
  204 + const dicCodes = ['SUPPLIER', 'APPLICABLE_STANDARD']
  205 + return getDicByCodes(dicCodes).then(results => {
  206 + this.dicOptions.SUPPLIER = results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
  207 + this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD && results.APPLICABLE_STANDARD.data ? results.APPLICABLE_STANDARD.data : []
  208 + this.refreshStandardName()
  209 + }).catch(() => { this.dicOptions = { SUPPLIER: [], APPLICABLE_STANDARD: [] } })
  210 + },
  211 + async loadDetail(id) {
  212 + try {
  213 + const res = await getDetailApi(id)
  214 + const m = res.data || {}
  215 + const next = { ...this.form, ...m }
  216 + next.id = m.id || m.code || id
  217 + next.purchaseOrderLineList = Array.isArray(m.purchaseOrderLineList) ? m.purchaseOrderLineList.map(x => ({ ...x })) : []
  218 + this.form = next;
  219 + this.initPurchaseOrderLineList = next.purchaseOrderLineList || [];
  220 + this.refreshStandardName()
  221 + } catch (e) {
  222 + uni.showToast({ title: '加载失败', icon: 'none' })
  223 + }
  224 + },
  225 + refreshStandardName() {
  226 + const est = (this.dicOptions.APPLICABLE_STANDARD || []).find(o => String(o.code) === String(this.form.executionStandard))
  227 + this.form.executionStandardName = est ? (est.name || '') : (this.form.executionStandardName || '')
  228 + },
  229 + openSheet(field) {
  230 + if (field === 'executionStandard') {
  231 + const options = (this.dicOptions.APPLICABLE_STANDARD || []).map(it => ({ label: it.name || '', value: it.code || '' }))
  232 + const current = this.form.executionStandard
  233 + const match = options.find(o => String(o.value) === String(current))
  234 + this.sheet = { ...this.sheet, visible: true, title: '执行标准', options, field, value: match ? match.value : '' }
  235 + }
  236 + },
  237 + onSheetConfirm({ value, label }) {
  238 + const field = this.sheet.field
  239 + if (field === 'executionStandard') {
  240 + this.form.executionStandard = value || ''
  241 + this.form.executionStandardName = label || ''
  242 + }
  243 + this.sheet.visible = false
  244 + },
  245 + getDicName: getDicName,
  246 + async onSubmit() {
  247 + const payload = { ...this.form }
  248 + console.log('onSubmit__payload', payload)
  249 + try {
  250 + await updateApi(payload)
  251 + uni.showToast({ title: '保存成功', icon: 'success' })
  252 + setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
  253 + } catch (e) {
  254 + uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
  255 + }
  256 + },
  257 + purchaseOrderLineListChange(data) {
  258 + const list = Array.isArray(data) ? data : []
  259 + this.form.purchaseOrderLineList = list;
  260 + },
  261 + }
  262 +}
  263 +</script>
  264 +
  265 +<style lang="scss" scoped>
  266 +.page {
  267 + display: flex;
  268 + flex-direction: column;
  269 + height: 100%;
  270 +}
  271 +
  272 +.scroll {
  273 + flex: 1;
  274 + padding: 6rpx 0 310rpx;
  275 +}
  276 +
  277 +
  278 +
  279 +.title-header {
  280 + background-color: #fff;
  281 + display: flex;
  282 + align-items: center;
  283 + padding: 32rpx 32rpx 22rpx;
  284 +
  285 + .title-header_icon {
  286 + width: 32rpx;
  287 + height: 28rpx;
  288 + margin-right: 16rpx;
  289 + }
  290 +
  291 + span {
  292 + color: rgba(0, 0, 0, 0.9);
  293 + font-size: 32rpx;
  294 + line-height: 44rpx;
  295 + font-weight: 600;
  296 + }
  297 +}
  298 +
  299 +
  300 +.section {
  301 + background: #fff;
  302 + margin-bottom: 20rpx;
  303 +}
  304 +
  305 +.section2 {
  306 + background: #f1f1f1;
  307 +}
  308 +
  309 +::v-deep .uni-list {
  310 + background: transparent;
  311 +
  312 + &-item {
  313 + &__extra-text {
  314 + font-size: 32rpx;
  315 + }
  316 +
  317 + &__content-title {
  318 + font-size: 32rpx;
  319 + color: rgba(0, 0, 0, 0.9);
  320 + }
  321 +
  322 + &__container {
  323 + padding: 32rpx;
  324 + // align-items: center;
  325 +
  326 + .uni-easyinput {
  327 +
  328 + .is-disabled {
  329 + background-color: transparent !important;
  330 + }
  331 +
  332 + &__placeholder-class {
  333 + font-size: 32rpx;
  334 + color: rgba(0, 0, 0, 0.4);
  335 + }
  336 +
  337 + &__content {
  338 + border: none;
  339 +
  340 + &-input {
  341 + padding-left: 0 !important;
  342 + height: 48rpx;
  343 + line-height: 48rpx;
  344 + font-size: 32rpx;
  345 + }
  346 +
  347 + .content-clear-icon {
  348 + font-size: 44rpx !important;
  349 + }
  350 + }
  351 + }
  352 +
  353 + .amount-row {
  354 + flex: 1;
  355 + display: flex;
  356 + align-items: center;
  357 +
  358 + .uni-easyinput {
  359 + flex: 1;
  360 + }
  361 +
  362 + .unit {
  363 + margin-left: 16rpx;
  364 + color: rgba(0, 0, 0, 0.9);
  365 + }
  366 + }
  367 +
  368 + .item-title,
  369 + .uni-list-item__content {
  370 + flex: none;
  371 + min-height: 48rpx;
  372 + line-height: 48rpx;
  373 + font-size: 32rpx;
  374 + position: relative;
  375 + width: 162rpx;
  376 + margin-right: 32rpx;
  377 + color: rgba(0, 0, 0, 0.9);
  378 + padding-right: 0;
  379 +
  380 +
  381 + .required {
  382 + color: red;
  383 + position: absolute;
  384 + top: 50%;
  385 + transform: translateY(-50%);
  386 + left: -16rpx;
  387 + }
  388 + }
  389 +
  390 + }
  391 +
  392 + &.select-item {
  393 + &.is-empty {
  394 + .uni-list-item__extra-text {
  395 + color: rgba(0, 0, 0, 0.4) !important;
  396 + }
  397 + }
  398 +
  399 + &.is-filled {
  400 + .uni-list-item__extra-text {
  401 + color: rgba(0, 0, 0, 0.9) !important;
  402 + }
  403 + }
  404 +
  405 + .serial-number-row {
  406 + display: flex;
  407 + align-items: center;
  408 + }
  409 +
  410 + }
  411 +
  412 + &.mgb10 {
  413 + margin-bottom: 20rpx;
  414 + }
  415 +
  416 + }
  417 +
  418 + .title-header {
  419 + background-color: #fff;
  420 + display: flex;
  421 + align-items: center;
  422 + padding: 32rpx 32rpx 22rpx;
  423 +
  424 + &_icon {
  425 + width: 32rpx;
  426 + height: 28rpx;
  427 + margin-right: 16rpx;
  428 + }
  429 +
  430 + span {
  431 + color: rgba(0, 0, 0, 0.9);
  432 + font-size: 32rpx;
  433 + line-height: 44rpx;
  434 + font-weight: 600;
  435 + }
  436 + }
  437 +}
  438 +
  439 +/* 只读 easyinput 根据内容自适应高度 */
  440 +::v-deep .uni-list-item__container {
  441 + align-items: flex-start;
  442 +}
  443 +
  444 +/* 只读文本样式 */
  445 +.readonly-text {
  446 + color: rgba(0, 0, 0, 0.9);
  447 + font-size: 32rpx;
  448 + line-height: 44rpx;
  449 + text-align: right;
  450 + white-space: pre-wrap;
  451 + word-break: break-all;
  452 +}
  453 +
  454 +
  455 +.footer {
  456 + position: fixed;
  457 + left: 0;
  458 + right: 0;
  459 + bottom: 0;
  460 + padding: 0 32rpx 32rpx;
  461 + padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  462 + background: #fff;
  463 + box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  464 +
  465 + .btn {
  466 + height: 80rpx;
  467 + line-height: 80rpx;
  468 + border-radius: 12rpx;
  469 + font-size: 32rpx;
  470 + }
  471 +
  472 + .submit {
  473 + background: $theme-primary;
  474 + color: #fff;
  475 + }
  476 +
  477 + .view-total {
  478 + padding: 20rpx 0;
  479 +
  480 + .head {
  481 + font-size: 32rpx;
  482 + font-weight: 600;
  483 + line-height: 50rpx;
  484 + color: rgba(0, 0, 0, 0.9);
  485 + padding-bottom: 16rpx;
  486 + margin-bottom: 24rpx;
  487 + ;
  488 + border-bottom: 1px dashed #E7E7E7;
  489 + }
  490 +
  491 + .row {
  492 + display: flex;
  493 + margin-bottom: 24rpx;
  494 + line-height: 32rpx;
  495 +
  496 + .label {
  497 + width: 180rpx;
  498 + margin-right: 14rpx;
  499 + color: rgba(0, 0, 0, 0.6);
  500 + font-size: 28rpx;
  501 + }
  502 +
  503 + .value {
  504 + flex: 1;
  505 + color: rgba(0, 0, 0, 0.9);
  506 + font-size: 28rpx;
  507 + white-space: pre-wrap;
  508 + word-break: break-all;
  509 + }
  510 + }
  511 + }
  512 +}
  513 +</style>
... ...
  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.orderNo }}</text>
  7 + <view :class="['status', `status_${form.status}`]" />
  8 + <view class="row"><text class="label">审核状态</text><text class="value act">{{ getDicName('AUDIT_STATUS',
  9 + form.examineStatus, dicOptions.AUDIT_STATUS) }}</text></view>
  10 + <view class="row"><text class="label">供货单位</text><text class="value">{{ getDicName('SUPPLIER',
  11 + form.supplyUnit, dicOptions.SUPPLIER) }}</text></view>
  12 + <view class="row"><text class="label">订货单位</text><text class="value">{{ form.orderingUnitName }}</text>
  13 + </view>
  14 + <view class="row"><text class="label">订货日期</text><text class="value">{{ form.orderDate }}</text></view>
  15 + <view class="row"><text class="label">生产厂</text><text class="value">{{ form.workshopName }}</text></view>
  16 + <view class="row"><text class="label">结算方式或期限</text><text class="value">{{ form.settlementTerms }}</text></view>
  17 + <view class="row"><text class="label">交货方式</text><text class="value">{{ form.deliveryMethod }}</text></view>
  18 + </view>
  19 +
  20 + <!-- 产品 -->
  21 + <view class="mgb10">
  22 + <Product mode="view" :options="genderOptions" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity || 0" />
  23 + </view>
  24 +
  25 + <view class="section">
  26 + <view class="row"><text class="label">价格表编号</text><text class="value">{{ form.priceListNo }}</text></view>
  27 + <view class="row"><text class="label">开票情况</text><text class="value">{{ form.invoicingStatus }}</text></view>
  28 + <view class="row"><text class="label">运费</text><text class="value">{{ form.shippingCost }}</text></view>
  29 + <view class="row"><text class="label">包装费</text><text class="value">{{ form.packagingFee }}</text></view>
  30 + <view class="row"><text class="label">执行标准</text><text class="value">{{ getDicName('APPLICABLE_STANDARD',
  31 + form.executionStandard, dicOptions.APPLICABLE_STANDARD) }}</text></view>
  32 + </view>
  33 +
  34 + <view class="title-header">
  35 + <image class="title-header_icon" src="/static/images/title.png" />
  36 + <span>具体质量要求</span>
  37 + </view>
  38 + <view class="section">
  39 + <view class="row"><text class="label">件重条头</text><text class="value">{{ form.pieceWeightHeader }}</text></view>
  40 + <view class="row"><text class="label">表面</text><text class="value">{{ form.surface }}</text></view>
  41 + <view class="row"><text class="label">公差</text><text class="value">{{ form.tolerance }}</text></view>
  42 + <view class="row"><text class="label">性能</text><text class="value">{{ form.performance }}</text></view>
  43 + <view class="row"><text class="label">成分</text><text class="value">{{ form.element }}</text></view>
  44 + <view class="row"><text class="label">包装</text><text class="value">{{ form.packaging }}</text></view>
  45 + <view class="row"><text class="label">备注</text><text class="value">{{ form.remarks }}</text></view>
  46 + </view>
  47 +
  48 + </view>
  49 + </scroll-view>
  50 + <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
  51 + </view>
  52 +</template>
  53 +
  54 +<script>
  55 +import { getDetailApi, cancelApi } from '@/api/change_list.js'
  56 +import Product from './product.vue'
  57 +import DetailButtons from '@/components/detail-buttons/index.vue'
  58 +import {
  59 + getDicName
  60 +} from '@/utils/dic.js'
  61 +import {
  62 + getDicByCodes
  63 +} from '@/utils/dic'
  64 +
  65 +export default {
  66 + name: 'ChangeListDetail',
  67 + components: { Product, DetailButtons },
  68 + data() {
  69 + return {
  70 + form: {},
  71 + enterpriseTypeOptions: [],
  72 + genderOptions: [],
  73 + categoryOptions: [],
  74 + historyList: [],
  75 + buttons: [
  76 + { text: '编辑', visible: true, variant: 'outline', event: 'edit' },
  77 + { text: '审核详情', visible: true, variant: 'outline', event: 'auditDetail' },
  78 + { text: '审核', visible: true, variant: 'primary', event: 'audit' },
  79 + { text: '申请发货', visible: true, variant: 'outline', event: 'shipmentApply' },
  80 + { text: '取消', visible: true, variant: 'outline', event: 'cancel', style: { color: 'rgba(0,0,0,0.9)', border: '1px solid #DCDCDC' } },
  81 + ],
  82 + dicOptions: {
  83 + AUDIT_STATUS: [],
  84 + SUPPLIER: [],
  85 + APPLICABLE_STANDARD: [],
  86 + },
  87 + }
  88 + },
  89 + computed: {
  90 + statusFlags() {
  91 + const s = String((this.form && this.form.status) || '')
  92 + const e = String((this.form && this.form.examineStatus) || '')
  93 + const d = (this.form && this.form.showExamine) || false
  94 + return {
  95 + isRefuse: e === 'REFUSE',
  96 + isAudit: e === 'AUDIT',
  97 + canExamine: d,
  98 + canDeliveryApply: s === 'ISSUED',
  99 + contractCreateBy: this.form.contractCreateBy
  100 + }
  101 + },
  102 + displayButtons() {
  103 + const f = this.statusFlags;
  104 + console.log('displayButtons__f', f)
  105 + return [
  106 + { ...this.buttons[0], visible: f.isRefuse && f.contractCreateBy },
  107 + { ...this.buttons[1], visible: true },
  108 + { ...this.buttons[2], visible: f.isAudit && f.canExamine },
  109 + { ...this.buttons[3], visible: f.canDeliveryApply },
  110 + { ...this.buttons[4], visible: f.isRefuse },
  111 + ]
  112 + }
  113 + },
  114 + created() {
  115 + this.loadAllDicData()
  116 + },
  117 + onLoad(query) {
  118 + const id = (query && (query.id || query.code)) || ''
  119 + if (id) this.loadDetail(id)
  120 + },
  121 + methods: {
  122 + async loadDetail(id) {
  123 + try {
  124 + const res = await getDetailApi(id)
  125 + const data = res.data || {}
  126 + this.form = { ...data }
  127 + } catch (e) {
  128 + this.form = {}
  129 + }
  130 + },
  131 + handleButtonClick(btn) {
  132 + if (!btn || btn.disabled) return
  133 + const map = {
  134 + edit: () => this.onEdit(),
  135 + auditDetail: () => this.onAuditDetail(),
  136 + audit: () => this.onAudit(),
  137 + shipmentApply: () => this.onShipmentApply(),
  138 + cancel: () => this.onCancel(),
  139 + }
  140 + const fn = map[btn.event]
  141 + if (typeof fn === 'function') fn()
  142 + },
  143 + getBusinessId() {
  144 + return (this.form && (this.form.id || this.form.code)) || ''
  145 + },
  146 + onEdit() {
  147 + const id = this.getBusinessId()
  148 + const query = id ? ('?id=' + encodeURIComponent(id)) : ''
  149 + uni.navigateTo({ url: '/pages/order_list/modify' + query })
  150 + },
  151 + onAuditDetail() {
  152 + const CACHE_KEY = 'sourceBusinessId'
  153 + uni.setStorageSync(CACHE_KEY, this.getBusinessId())
  154 + uni.navigateTo({ url: '/pages/flow/audit_detail' })
  155 + },
  156 + onAudit() {
  157 + const CACHE_KEY = 'sourceBusinessId'
  158 + uni.setStorageSync(CACHE_KEY, this.getBusinessId())
  159 + uni.navigateTo({ url: '/pages/flow/audit' })
  160 + },
  161 + onShipmentApply() {
  162 + const id = this.getBusinessId()
  163 + const query = id ? ('?id=' + encodeURIComponent(id)) : ''
  164 + uni.navigateTo({ url: '/pages/order_list/shipment_apply' + query })
  165 + },
  166 + onCancel() {
  167 + const id = this.getBusinessId()
  168 + if (!id) return
  169 + uni.showModal({
  170 + title: '系统提示',
  171 + content: '是否确定取消该流程？',
  172 + confirmText: '确定',
  173 + cancelText: '取消',
  174 + success: (res) => {
  175 + if (res && res.confirm) {
  176 + cancelApi(id).then(() => {
  177 + uni.showToast({ title: '已取消', icon: 'none' })
  178 + setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
  179 + }).catch(() => {
  180 + uni.showToast({ title: '取消失败', icon: 'none' })
  181 + })
  182 + }
  183 + }
  184 + })
  185 + },
  186 + getCategoryClass(categoryName) {
  187 + if (!categoryName) return ''
  188 + if (categoryName.includes('A') || categoryName.includes('a')) {
  189 + return 'category_A'
  190 + } else if (categoryName.includes('B') || categoryName.includes('b')) {
  191 + return 'category_B'
  192 + } else if (categoryName.includes('C') || categoryName.includes('c')) {
  193 + return 'category_C'
  194 + } else if (categoryName.includes('D') || categoryName.includes('d')) {
  195 + return 'category_D'
  196 + }
  197 + },
  198 + loadAllDicData() {
  199 + const dicCodes = ['AUDIT_STATUS', 'SUPPLIER', 'APPLICABLE_STANDARD']
  200 + return getDicByCodes(dicCodes).then(results => {
  201 + this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
  202 + this.dicOptions.SUPPLIER = results.SUPPLIER.data || []
  203 + this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD.data || []
  204 + }).catch(() => {
  205 + this.dicOptions = {
  206 + AUDIT_STATUS: [],
  207 + SUPPLIER: [],
  208 + APPLICABLE_STANDARD: [],
  209 + }
  210 + })
  211 + },
  212 + getDicName: getDicName,
  213 + }
  214 +}
  215 +</script>
  216 +
  217 +<style lang="scss" scoped>
  218 +.page {
  219 + display: flex;
  220 + flex-direction: column;
  221 + height: 100%;
  222 +}
  223 +
  224 +.scroll {
  225 + flex: 1;
  226 + padding: 8rpx 0 144rpx 0;
  227 +}
  228 +
  229 +.detail-page {
  230 + background: #f3f3f3;
  231 +}
  232 +
  233 +.section {
  234 + padding: 32rpx;
  235 + background: #fff;
  236 + margin-bottom: 20rpx;
  237 + position: relative;
  238 +
  239 + .status {
  240 + position: absolute;
  241 + top: 16rpx;
  242 + right: 52rpx;
  243 + width: 180rpx;
  244 + height: 146rpx;
  245 + background-repeat: no-repeat;
  246 + background-size: 100% 100%;
  247 + background-position: center;
  248 +
  249 + // 已下发
  250 + &_ISSUED {
  251 + background-image: url('~@/static/images/order_list/status_ISSUED.png');
  252 + }
  253 +
  254 + // 待发货
  255 + &_WAIT {
  256 + background-image: url('~@/static/images/order_list/status_WAIT.png');
  257 + }
  258 +
  259 + // 部分发货
  260 + &_TRANSIT {
  261 + background-image: url('~@/static/images/order_list/status_TRANSIT.png');
  262 + }
  263 +
  264 + // 发货完成
  265 + &_SHIPPED {
  266 + background-image: url('~@/static/images/order_list/status_SHIPPED.png');
  267 + }
  268 +
  269 + // 已签收
  270 + &_DELIVERED {
  271 + background-image: url('~@/static/images/order_list/status_DELIVERED.png');
  272 + }
  273 +
  274 + }
  275 +}
  276 +
  277 +.mgb10 {
  278 + margin-bottom: 20rpx;
  279 +}
  280 +
  281 +.row {
  282 + display: flex;
  283 + margin-bottom: 28rpx;
  284 +
  285 + &:last-child {
  286 + margin-bottom: 0;
  287 + }
  288 +
  289 + &.company {
  290 + font-size: 36rpx;
  291 + font-weight: 600;
  292 + color: rgba(0, 0, 0, 0.9);
  293 + padding-top: 32rpx;
  294 + line-height: 50rpx;
  295 + }
  296 +
  297 + .label {
  298 + max-width: 420rpx;
  299 + line-height: 32rpx;
  300 + font-size: 28rpx;
  301 + color: rgba(0, 0, 0, 0.6);
  302 + }
  303 +
  304 + .value {
  305 + flex: 1;
  306 + line-height: 32rpx;
  307 + font-size: 28rpx;
  308 + color: rgba(0, 0, 0, 0.9);
  309 + text-align: right;
  310 +
  311 + &.act {
  312 + color: $theme-primary;
  313 + }
  314 +
  315 + .category {
  316 + display: inline-block;
  317 + padding: 4rpx 12rpx;
  318 + border-radius: 6rpx;
  319 + font-size: 24rpx;
  320 + width: auto;
  321 +
  322 + &.category_A {
  323 + background: #FFF0ED;
  324 + color: #D54941;
  325 + }
  326 +
  327 + &.category_B {
  328 + background: #FFF1E9;
  329 + color: #E37318;
  330 + }
  331 +
  332 + &.category_C {
  333 + background: #F2F3FF;
  334 + color: $theme-primary;
  335 + }
  336 +
  337 + &.category_D {
  338 + background: #E3F9E9;
  339 + color: #2BA471;
  340 + }
  341 + }
  342 + }
  343 +}
  344 +
  345 +.card {
  346 + padding: 16rpx 0 8rpx;
  347 + border-top: 1rpx solid #f0f0f0;
  348 +}
  349 +
  350 +.history-header {
  351 + display: flex;
  352 + background: #F7F7F7;
  353 + padding: 20rpx 52rpx 20rpx 32rpx;
  354 +
  355 + .col {
  356 + font-size: 28rpx;
  357 + color: rgba(0, 0, 0, 0.9);
  358 + line-height: 40rpx;
  359 + }
  360 +
  361 + .col1 {
  362 + width: 20%;
  363 + }
  364 +
  365 + .col2 {
  366 + width: 50%;
  367 + text-align: center;
  368 + }
  369 +
  370 + .col3 {
  371 + width: 30%;
  372 + text-align: right;
  373 + }
  374 +}
  375 +
  376 +.history-row {
  377 + display: flex;
  378 + padding: 20rpx 52rpx 20rpx 32rpx;
  379 + border-bottom: 1rpx solid #f7f7f7;
  380 +
  381 + .col {
  382 + font-size: 28rpx;
  383 + color: rgba(0, 0, 0, 0.9);
  384 + line-height: 40rpx;
  385 + }
  386 +
  387 + .col1 {
  388 + width: 20%;
  389 + }
  390 +
  391 + .col2 {
  392 + width: 50%;
  393 + text-align: center;
  394 + }
  395 +
  396 + .col3 {
  397 + width: 30%;
  398 + text-align: right;
  399 + }
  400 +
  401 + .link {
  402 + color: $theme-primary;
  403 + }
  404 +}
  405 +
  406 +.title-header {
  407 + background-color: #fff;
  408 + display: flex;
  409 + align-items: center;
  410 + padding: 32rpx 32rpx 22rpx;
  411 + border-bottom: 1rpx dashed #f0f0f0;
  412 +
  413 + &_icon {
  414 + width: 32rpx;
  415 + height: 28rpx;
  416 + margin-right: 16rpx;
  417 + }
  418 +
  419 + span {
  420 + color: rgba(0, 0, 0, 0.9);
  421 + font-size: 32rpx;
  422 + line-height: 44rpx;
  423 + font-weight: 600;
  424 + }
  425 +}
  426 +</style>
... ...
  1 +<template>
  2 + <view class="page">
  3 + <scroll-view class="scroll" scroll-y>
  4 + <uni-list>
  5 + <view class="section">
  6 + <uni-list-item title="订单编号">
  7 + <template v-slot:footer>
  8 + <view class="readonly-text">{{ form.orderNo }}</view>
  9 + </template>
  10 + </uni-list-item>
  11 + <uni-list-item title="供货单位">
  12 + <template v-slot:footer>
  13 + <view class="readonly-text">{{ getDicName('SUPPLIER', form.supplyUnit, dicOptions.SUPPLIER) }}</view>
  14 + </template>
  15 + </uni-list-item>
  16 + <uni-list-item title="订货单位">
  17 + <template v-slot:footer>
  18 + <view class="readonly-text">{{ form.orderingUnitName }}</view>
  19 + </template>
  20 + </uni-list-item>
  21 + <uni-list-item title="订货日期">
  22 + <template v-slot:footer>
  23 + <view class="readonly-text">{{ form.orderDate }}</view>
  24 + </template>
  25 + </uni-list-item>
  26 + <uni-list-item title="生产厂">
  27 + <template v-slot:footer>
  28 + <view class="readonly-text">{{ form.workshopName }}</view>
  29 + </template>
  30 + </uni-list-item>
  31 + <uni-list-item title="结算方式或期限">
  32 + <template v-slot:footer>
  33 + <view class="readonly-text">{{ form.settlementTerms }}</view>
  34 + </template>
  35 + </uni-list-item>
  36 +
  37 + <uni-list-item title="交货方式">
  38 + <template v-slot:footer>
  39 + <uni-easyinput v-model="form.deliveryMethod" placeholder="请输入交货方式" :inputBorder="false" />
  40 + </template>
  41 + </uni-list-item>
  42 + </view>
  43 +
  44 + <!-- 产品 -->
  45 + <view class="section2">
  46 + <Product mode="add" :list="initPurchaseOrderLineList" @change="purchaseOrderLineListChange" />
  47 + </view>
  48 +
  49 + <view class="section">
  50 + <uni-list-item title="价格表编号">
  51 + <template v-slot:footer>
  52 + <uni-easyinput v-model="form.priceListNo" placeholder="请输入价格表编号" :inputBorder="false" />
  53 + </template>
  54 + </uni-list-item>
  55 + <uni-list-item title="开票情况">
  56 + <template v-slot:footer>
  57 + <uni-easyinput v-model="form.invoicingStatus" placeholder="请输入开票情况" :inputBorder="false" />
  58 + </template>
  59 + </uni-list-item>
  60 + <uni-list-item class="amount-item">
  61 + <template v-slot:body>
  62 + <view class="item-title"><text>运费</text></view>
  63 + </template>
  64 + <template v-slot:footer>
  65 + <view class="amount-row">
  66 + <uni-easyinput type="number" v-model="form.shippingCost" placeholder="0.00" :inputBorder="false" />
  67 + <text class="unit">元</text>
  68 + </view>
  69 + </template>
  70 + </uni-list-item>
  71 + <uni-list-item class="amount-item">
  72 + <template v-slot:body>
  73 + <view class="item-title"><text>包装费</text></view>
  74 + </template>
  75 + <template v-slot:footer>
  76 + <view class="amount-row">
  77 + <uni-easyinput type="number" v-model="form.packagingFee" placeholder="0.00" :inputBorder="false" />
  78 + <text class="unit">元</text>
  79 + </view>
  80 + </template>
  81 + </uni-list-item>
  82 + <uni-list-item class="select-item" :class="form.executionStandardName ? 'is-filled' : 'is-empty'" clickable
  83 + @click="openSheet('executionStandard')" :rightText="form.executionStandardName || '请选择'" showArrow>
  84 + <template v-slot:body>
  85 + <view class="item-title"><text>执行标准</text></view>
  86 + </template>
  87 + </uni-list-item>
  88 + </view>
  89 +
  90 +
  91 + <view class="title-header">
  92 + <image class="title-header_icon" src="/static/images/title.png" />
  93 + <span>具体质量要求</span>
  94 + </view>
  95 +
  96 + <uni-list-item title="件重条头">
  97 + <template v-slot:footer>
  98 + <uni-easyinput type="textarea" v-model="form.pieceWeightHeader" placeholder="请输入件重条头"
  99 + :inputBorder="false" />
  100 + </template>
  101 + </uni-list-item>
  102 + <uni-list-item title="表面">
  103 + <template v-slot:footer>
  104 + <uni-easyinput type="textarea" v-model="form.surface" placeholder="请输入表面" :inputBorder="false" />
  105 + </template>
  106 + </uni-list-item>
  107 + <uni-list-item title="公差">
  108 + <template v-slot:footer>
  109 + <uni-easyinput type="textarea" v-model="form.tolerance" placeholder="请输入公差" :inputBorder="false" />
  110 + </template>
  111 + </uni-list-item>
  112 + <uni-list-item title="性能">
  113 + <template v-slot:footer>
  114 + <uni-easyinput type="textarea" v-model="form.performance" placeholder="请输入性能" :inputBorder="false" />
  115 + </template>
  116 + </uni-list-item>
  117 + <uni-list-item title="成分">
  118 + <template v-slot:footer>
  119 + <uni-easyinput type="textarea" v-model="form.element" placeholder="请输入成分" :inputBorder="false" />
  120 + </template>
  121 + </uni-list-item>
  122 + <uni-list-item title="包装">
  123 + <template v-slot:footer>
  124 + <uni-easyinput type="textarea" v-model="form.packaging" placeholder="请输入包装" :inputBorder="false" />
  125 + </template>
  126 + </uni-list-item>
  127 + <uni-list-item title="备注">
  128 + <template v-slot:footer>
  129 + <uni-easyinput type="textarea" v-model="form.remarks" placeholder="请输入备注" :inputBorder="false" />
  130 + </template>
  131 + </uni-list-item>
  132 +
  133 +
  134 + </uni-list>
  135 + </scroll-view>
  136 +
  137 + <view class="footer">
  138 + <view class="view-total">
  139 + <view class="head">合计</view>
  140 + <view class="row">
  141 + <text class="label">总数量</text><text class="value">{{ form.totalQuantity }}</text>
  142 + </view>
  143 + </view>
  144 + <button class="btn submit" type="primary" @click="onSubmit">提交</button>
  145 + </view>
  146 + <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
  147 + @confirm="onSheetConfirm" />
  148 + </view>
  149 +</template>
  150 +
  151 +<script>
  152 +import { getDetailApi, updateApi } from '@/api/change_list.js'
  153 +import Product from './product.vue'
  154 +import SingleSelectSheet from '@/components/single-select/index.vue'
  155 +import { getDicName } from '@/utils/dic.js'
  156 +import { getDicByCodes } from '@/utils/dic'
  157 +
  158 +export default {
  159 + name: 'ChangeListModify',
  160 + components: { Product, SingleSelectSheet },
  161 + data() {
  162 + return {
  163 + id: '',
  164 + form: {
  165 + code: '',
  166 + supplier: '',
  167 + buyer: '',
  168 + // 默认当前日期 格式为 yyyy-MM-dd
  169 + orderDate: new Date().toISOString().substring(0, 10),
  170 + unit: '',
  171 + totalQuantity: '',
  172 + totalAmountExcludingTax: '',
  173 + totalAmountIncludingTax: '',
  174 + totalAmountCapital: '',
  175 + depositInfo: '',
  176 + packagingRequirements: '',
  177 + paymentTerms: '',
  178 + transportMode: '',
  179 + destinationId: [],
  180 + includesPackagingFee: '',
  181 + includesTransportFee: '',
  182 + designatedConsignee: '',
  183 + specialTerms: '',
  184 + executionStandard: '',
  185 + executionStandardRemarks: '',
  186 + specialInstructions: '',
  187 + remarks: '',
  188 + pieceWeightHead: '',
  189 + surface: '',
  190 + tolerance: '',
  191 + performance: '',
  192 + component: '',
  193 + packaging: '',
  194 + },
  195 + initPurchaseOrderLineList: [],
  196 + dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [] },
  197 + sheet: { visible: false, title: '请选择', options: [], value: '', field: '' }
  198 + }
  199 + },
  200 + onLoad(query) {
  201 + this.id = (query && (query.id || query.code)) || ''
  202 + if (this.id) this.loadDetail(this.id)
  203 + this.loadDicOptions()
  204 + },
  205 + methods: {
  206 + loadDicOptions() {
  207 + const dicCodes = ['SUPPLIER', 'APPLICABLE_STANDARD']
  208 + return getDicByCodes(dicCodes).then(results => {
  209 + this.dicOptions.SUPPLIER = results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
  210 + this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD && results.APPLICABLE_STANDARD.data ? results.APPLICABLE_STANDARD.data : []
  211 + this.refreshStandardName()
  212 + }).catch(() => { this.dicOptions = { SUPPLIER: [], APPLICABLE_STANDARD: [] } })
  213 + },
  214 + async loadDetail(id) {
  215 + try {
  216 + const res = await getDetailApi(id)
  217 + const m = res.data || {}
  218 + const next = { ...this.form, ...m }
  219 + next.id = m.id || m.code || id
  220 + next.purchaseOrderLineList = Array.isArray(m.purchaseOrderLineList) ? m.purchaseOrderLineList.map(x => ({ ...x })) : []
  221 + this.form = next;
  222 + this.initPurchaseOrderLineList = next.purchaseOrderLineList || [];
  223 + this.refreshStandardName()
  224 + } catch (e) {
  225 + uni.showToast({ title: '加载失败', icon: 'none' })
  226 + }
  227 + },
  228 + refreshStandardName() {
  229 + const est = (this.dicOptions.APPLICABLE_STANDARD || []).find(o => String(o.code) === String(this.form.executionStandard))
  230 + this.form.executionStandardName = est ? (est.name || '') : (this.form.executionStandardName || '')
  231 + },
  232 + openSheet(field) {
  233 + if (field === 'executionStandard') {
  234 + const options = (this.dicOptions.APPLICABLE_STANDARD || []).map(it => ({ label: it.name || '', value: it.code || '' }))
  235 + const current = this.form.executionStandard
  236 + const match = options.find(o => String(o.value) === String(current))
  237 + this.sheet = { ...this.sheet, visible: true, title: '执行标准', options, field, value: match ? match.value : '' }
  238 + }
  239 + },
  240 + onSheetConfirm({ value, label }) {
  241 + const field = this.sheet.field
  242 + if (field === 'executionStandard') {
  243 + this.form.executionStandard = value || ''
  244 + this.form.executionStandardName = label || ''
  245 + }
  246 + this.sheet.visible = false
  247 + },
  248 + getDicName: getDicName,
  249 + async onSubmit() {
  250 + const payload = { ...this.form }
  251 + console.log('onSubmit__payload', payload)
  252 + try {
  253 + await updateApi(payload)
  254 + uni.showToast({ title: '保存成功', icon: 'success' })
  255 + setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
  256 + } catch (e) {
  257 + uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
  258 + }
  259 + },
  260 + purchaseOrderLineListChange(data) {
  261 + const list = Array.isArray(data) ? data : []
  262 + this.form.purchaseOrderLineList = list;
  263 + },
  264 + }
  265 +}
  266 +</script>
  267 +
  268 +<style lang="scss" scoped>
  269 +.page {
  270 + display: flex;
  271 + flex-direction: column;
  272 + height: 100%;
  273 +}
  274 +
  275 +.scroll {
  276 + flex: 1;
  277 + padding: 6rpx 0 310rpx;
  278 +}
  279 +
  280 +
  281 +
  282 +.title-header {
  283 + background-color: #fff;
  284 + display: flex;
  285 + align-items: center;
  286 + padding: 32rpx 32rpx 22rpx;
  287 +
  288 + .title-header_icon {
  289 + width: 32rpx;
  290 + height: 28rpx;
  291 + margin-right: 16rpx;
  292 + }
  293 +
  294 + span {
  295 + color: rgba(0, 0, 0, 0.9);
  296 + font-size: 32rpx;
  297 + line-height: 44rpx;
  298 + font-weight: 600;
  299 + }
  300 +}
  301 +
  302 +
  303 +.section {
  304 + background: #fff;
  305 + margin-bottom: 20rpx;
  306 +}
  307 +
  308 +.section2 {
  309 + background: #f1f1f1;
  310 +}
  311 +
  312 +::v-deep .uni-list {
  313 + background: transparent;
  314 +
  315 + &-item {
  316 + &__extra-text {
  317 + font-size: 32rpx;
  318 + }
  319 +
  320 + &__content-title {
  321 + font-size: 32rpx;
  322 + color: rgba(0, 0, 0, 0.9);
  323 + }
  324 +
  325 + &__container {
  326 + padding: 32rpx;
  327 + // align-items: center;
  328 +
  329 + .uni-easyinput {
  330 +
  331 + .is-disabled {
  332 + background-color: transparent !important;
  333 + }
  334 +
  335 + &__placeholder-class {
  336 + font-size: 32rpx;
  337 + color: rgba(0, 0, 0, 0.4);
  338 + }
  339 +
  340 + &__content {
  341 + border: none;
  342 +
  343 + &-input {
  344 + padding-left: 0 !important;
  345 + height: 48rpx;
  346 + line-height: 48rpx;
  347 + font-size: 32rpx;
  348 + }
  349 +
  350 + .content-clear-icon {
  351 + font-size: 44rpx !important;
  352 + }
  353 + }
  354 + }
  355 +
  356 + .amount-row {
  357 + flex: 1;
  358 + display: flex;
  359 + align-items: center;
  360 +
  361 + .uni-easyinput {
  362 + flex: 1;
  363 + }
  364 +
  365 + .unit {
  366 + margin-left: 16rpx;
  367 + color: rgba(0, 0, 0, 0.9);
  368 + }
  369 + }
  370 +
  371 + .item-title,
  372 + .uni-list-item__content {
  373 + flex: none;
  374 + min-height: 48rpx;
  375 + line-height: 48rpx;
  376 + font-size: 32rpx;
  377 + position: relative;
  378 + width: 162rpx;
  379 + margin-right: 32rpx;
  380 + color: rgba(0, 0, 0, 0.9);
  381 + padding-right: 0;
  382 +
  383 +
  384 + .required {
  385 + color: red;
  386 + position: absolute;
  387 + top: 50%;
  388 + transform: translateY(-50%);
  389 + left: -16rpx;
  390 + }
  391 + }
  392 +
  393 + }
  394 +
  395 + &.select-item {
  396 + &.is-empty {
  397 + .uni-list-item__extra-text {
  398 + color: rgba(0, 0, 0, 0.4) !important;
  399 + }
  400 + }
  401 +
  402 + &.is-filled {
  403 + .uni-list-item__extra-text {
  404 + color: rgba(0, 0, 0, 0.9) !important;
  405 + }
  406 + }
  407 +
  408 + .serial-number-row {
  409 + display: flex;
  410 + align-items: center;
  411 + }
  412 +
  413 + }
  414 +
  415 + &.mgb10 {
  416 + margin-bottom: 20rpx;
  417 + }
  418 +
  419 + }
  420 +
  421 + .title-header {
  422 + background-color: #fff;
  423 + display: flex;
  424 + align-items: center;
  425 + padding: 32rpx 32rpx 22rpx;
  426 +
  427 + &_icon {
  428 + width: 32rpx;
  429 + height: 28rpx;
  430 + margin-right: 16rpx;
  431 + }
  432 +
  433 + span {
  434 + color: rgba(0, 0, 0, 0.9);
  435 + font-size: 32rpx;
  436 + line-height: 44rpx;
  437 + font-weight: 600;
  438 + }
  439 + }
  440 +}
  441 +
  442 +/* 只读 easyinput 根据内容自适应高度 */
  443 +::v-deep .uni-list-item__container {
  444 + align-items: flex-start;
  445 +}
  446 +
  447 +/* 只读文本样式 */
  448 +.readonly-text {
  449 + color: rgba(0, 0, 0, 0.9);
  450 + font-size: 32rpx;
  451 + line-height: 44rpx;
  452 + text-align: right;
  453 + white-space: pre-wrap;
  454 + word-break: break-all;
  455 +}
  456 +
  457 +
  458 +.footer {
  459 + position: fixed;
  460 + left: 0;
  461 + right: 0;
  462 + bottom: 0;
  463 + padding: 0 32rpx 32rpx;
  464 + padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  465 + background: #fff;
  466 + box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  467 +
  468 + .btn {
  469 + height: 80rpx;
  470 + line-height: 80rpx;
  471 + border-radius: 12rpx;
  472 + font-size: 32rpx;
  473 + }
  474 +
  475 + .submit {
  476 + background: $theme-primary;
  477 + color: #fff;
  478 + }
  479 +
  480 + .view-total {
  481 + padding: 20rpx 0;
  482 +
  483 + .head {
  484 + font-size: 32rpx;
  485 + font-weight: 600;
  486 + line-height: 50rpx;
  487 + color: rgba(0, 0, 0, 0.9);
  488 + padding-bottom: 16rpx;
  489 + margin-bottom: 24rpx;
  490 + ;
  491 + border-bottom: 1px dashed #E7E7E7;
  492 + }
  493 +
  494 + .row {
  495 + display: flex;
  496 + margin-bottom: 24rpx;
  497 + line-height: 32rpx;
  498 +
  499 + .label {
  500 + width: 180rpx;
  501 + margin-right: 14rpx;
  502 + color: rgba(0, 0, 0, 0.6);
  503 + font-size: 28rpx;
  504 + }
  505 +
  506 + .value {
  507 + flex: 1;
  508 + color: rgba(0, 0, 0, 0.9);
  509 + font-size: 28rpx;
  510 + white-space: pre-wrap;
  511 + word-break: break-all;
  512 + }
  513 + }
  514 + }
  515 +}
  516 +</style>
... ...
  1 +<template>
  2 + <view class="product" :class="{ 'history': mode == 'history' }">
  3 +
  4 + <!-- 新增&详情-产品 -->
  5 + <view class="header bp">
  6 + <image class="opCollapse" src="/static/images/title.png" />
  7 + <text class="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 + <view class="row"><text class="label">行业</text><text class="value">{{ item.industry }}</text></view>
  21 + <view class="row"><text class="label">品质</text><text class="value">{{ item.quality }}</text></view>
  22 + <view class="row"><text class="label">牌号</text><text class="value">{{ item.brand }}</text></view>
  23 +
  24 + <view v-show="!item.collapsed">
  25 + <!-- 厚（公差） * 宽（公差） * 长（公差） -->
  26 + <view class="row row-spec"><text class="label">规格(mm)</text>
  27 + <view class="value value-spec">
  28 + <view v-if="item.thickness" class="value-spec_val">{{ item.thickness }}</view>
  29 + <view v-if="item.thickness" class="value-spec_box">
  30 + <view v-if="item.thicknessTolPos" class="value-spec_box_1">+{{ item.thicknessTolPos }}
  31 + </view>
  32 + <view v-if="item.thicknessTolNeg" class="value-spec_box_2">-{{ item.thicknessTolNeg }}
  33 + </view>
  34 + </view>
  35 + <view v-if="item.width" class="value-spec_val p12">*</view>
  36 + <view v-if="item.width" class="value-spec_val">{{ item.width }}</view>
  37 + <view v-if="item.width" class="value-spec_box">
  38 + <view v-if="item.widthTolPos" class="value-spec_box_1">+{{ item.widthTolPos }}</view>
  39 + <view v-if="item.widthTolNeg" class="value-spec_box_2">-{{ item.widthTolNeg }}</view>
  40 + </view>
  41 + <view v-if="item.length" class="value-spec_val p12">*</view>
  42 + <view v-if="item.length" class="value-spec_val">{{ item.length }}</view>
  43 + <view v-if="item.length" class="value-spec_box">
  44 + <view v-if="item.lengthTolPos" class="value-spec_box_1">+{{ item.lengthTolPos }}</view>
  45 + <view v-if="item.lengthTolNeg" class="value-spec_box_2">-{{ item.lengthTolNeg }}</view>
  46 + </view>
  47 + </view>
  48 + </view>
  49 + <view class="row"><text class="label">状态</text><text class="value">{{ item.status }}</text></view>
  50 + <view class="row" :class="{ 'noneStyle': !item.showSalesPrice }"><text
  51 + class="label">数量kg</text><text class="value">{{ item.quantity }}</text>
  52 + </view>
  53 + <view class="row" :class="{ 'noneStyle': item.showSalesPrice }" v-if="item.showSalesPrice"><text
  54 + class="label">销售价格</text><text class="value">{{
  55 + item.salesPrice }}</text></view>
  56 +
  57 + <uni-list class="edit-list">
  58 + <uni-list-item title="发货日期">
  59 + <template v-slot:footer>
  60 + <uni-datetime-picker type="date" v-model="item.deliveryDate" />
  61 + </template>
  62 + </uni-list-item>
  63 + <uni-list-item title="考核超协">
  64 + <template v-slot:footer>
  65 + <uni-easyinput v-model="item.assessmentExceedsAgreement" placeholder="请输入考核超协"
  66 + :inputBorder="false" />
  67 + </template>
  68 + </uni-list-item>
  69 + </uni-list>
  70 + </view>
  71 +
  72 + <view class="block-ops">
  73 + <div class="del" @click="onRemove(item.personId)">
  74 + <image src="/static/images/delete.png" class="icon" />
  75 + 删除
  76 + </div>
  77 + <div class="toggle" @click="toggleItem(idx)">
  78 + <image :src="item.collapsed ? '/static/images/up.png' : '/static/images/down.png'"
  79 + class="icon" />
  80 + {{ item.collapsed ? '展开' : '收起' }}
  81 + </div>
  82 + </view>
  83 + </view>
  84 + </view>
  85 +
  86 + <view v-else-if="mode === 'view'" class="view-list" v-show="!collapsedView">
  87 + <view v-for="(item, idx) in items" :key="'v-' + idx" class="card">
  88 + <view class="row"><text class="label">行业</text><text class="value">{{ item.industry }}</text></view>
  89 + <view class="row"><text class="label">品质</text><text class="value">{{ item.quality }}</text></view>
  90 + <view class="row"><text class="label">牌号</text><text class="value">{{ item.brand }}</text></view>
  91 + <!-- 厚（公差） * 宽（公差） * 长（公差） -->
  92 + <view class="row row-spec"><text class="label">规格(mm)</text>
  93 + <view class="value value-spec">
  94 + <view v-if="item.thickness" class="value-spec_val">{{ item.thickness }}</view>
  95 + <view v-if="item.thickness" class="value-spec_box">
  96 + <view v-if="item.thicknessTolPos" class="value-spec_box_1">+{{ item.thicknessTolPos }}
  97 + </view>
  98 + <view v-if="item.thicknessTolNeg" class="value-spec_box_2">-{{ item.thicknessTolNeg }}
  99 + </view>
  100 + </view>
  101 + <view v-if="item.width" class="value-spec_val p12">*</view>
  102 + <view v-if="item.width" class="value-spec_val">{{ item.width }}</view>
  103 + <view v-if="item.width" class="value-spec_box">
  104 + <view v-if="item.widthTolPos" class="value-spec_box_1">+{{ item.widthTolPos }}</view>
  105 + <view v-if="item.widthTolNeg" class="value-spec_box_2">-{{ item.widthTolNeg }}</view>
  106 + </view>
  107 + <view v-if="item.length" class="value-spec_val p12">*</view>
  108 + <view v-if="item.length" class="value-spec_val">{{ item.length }}</view>
  109 + <view v-if="item.length" class="value-spec_box">
  110 + <view v-if="item.lengthTolPos" class="value-spec_box_1">+{{ item.lengthTolPos }}</view>
  111 + <view v-if="item.lengthTolNeg" class="value-spec_box_2">-{{ item.lengthTolNeg }}</view>
  112 + </view>
  113 + </view>
  114 + </view>
  115 + <view class="row"><text class="label">状态</text><text class="value">{{ item.status }}</text></view>
  116 + <view class="row"><text class="label">数量kg</text><text class="value">{{ item.quantity }}</text></view>
  117 + <!-- showSalesPrice 判断是否显示 -->
  118 + <view class="row" v-if="item.showSalesPrice"><text class="label">销售价格</text><text class="value">{{
  119 + item.salesPrice }}</text></view>
  120 + <view class="row"><text class="label">发货日期</text><text class="value">{{ item.deliveryDate }}</text>
  121 + </view>
  122 + <view class="row"><text class="label">考核超协</text><text class="value">{{ item.assessmentExceedsAgreement
  123 + }}</text></view>
  124 + </view>
  125 + <view class="view-total">
  126 + <view class="head">合计</view>
  127 + <view class="row">
  128 + <text class="label">总数量</text><text class="value">{{ totalQuantity }}</text>
  129 + </view>
  130 + </view>
  131 + </view>
  132 +
  133 + </view>
  134 +</template>
  135 +<script>
  136 +import { uuid } from '@/utils/uuid.js'
  137 +export default {
  138 + name: 'Product',
  139 + props: {
  140 + title: { type: String, default: '' },
  141 + mode: { type: String, default: 'add' },
  142 + list: { type: Array, default: () => [] },
  143 + max: { type: Number, default: 8 },
  144 + options: { type: Array, default: () => [] },
  145 + totalQuantity: { type: Number, default: 0 }
  146 + },
  147 + data() {
  148 + return {
  149 + items: [],
  150 + collapsedView: false,
  151 + sheet: { visible: false, title: '请选择性别', options: [], value: '', idx: -1 }
  152 + }
  153 + },
  154 + computed: {
  155 + selectOptions() {
  156 + const list = Array.isArray(this.options) ? this.options : []
  157 + return list.map(o => ({
  158 + label: o.label != null ? o.label : (o.text != null ? o.text : (o.name != null ? o.name : '')),
  159 + value: o.value != null ? o.value : (o.code != null ? o.code : (o.id != null ? o.id : o.productId))
  160 + }))
  161 + }
  162 + },
  163 + watch: {
  164 + items: {
  165 + handler() { this.emitChange() },
  166 + deep: true
  167 + },
  168 + list: {
  169 + handler(v) {
  170 + const arr = Array.isArray(v) ? v : []
  171 + const opts = this.selectOptions
  172 + this.items = arr.map(x => {
  173 + const it = { ...this.defaultItem(), ...x, collapsed: true }
  174 + const m = opts.find(o => String(o.value) === String(it.sex))
  175 + it.sexName = m ? (m.label || '') : it.sexName
  176 + return it
  177 + })
  178 + },
  179 + deep: true
  180 + },
  181 + options: {
  182 + handler() { this.refreshSexNames() }
  183 + }
  184 + },
  185 + created() {
  186 + const init = Array.isArray(this.list) && this.list.length > 0 ? this.list.map(v => ({ ...this.defaultItem(), ...v, collapsed: false })) : [{ ...this.defaultItem(), collapsed: false }]
  187 + this.items = init
  188 + },
  189 + methods: {
  190 + defaultItem() {
  191 + return { personId: uuid(), name: '', sex: '', sexName: '', nativePlace: '', age: '', position: '', mobile: '', phone: '', email: '', address: '', collapsed: false }
  192 + },
  193 + getSexName(item) {
  194 + const opts = this.selectOptions
  195 + const v = item && item.sex
  196 + const m = opts.find(o => String(o.value) === String(v))
  197 + return m ? (m.label || '') : ((item && item.sexName) || '')
  198 + },
  199 + refreshSexNames() {
  200 + const opts = this.selectOptions
  201 + this.items = (this.items || []).map(it => {
  202 + const m = opts.find(o => String(o.value) === String(it.sex))
  203 + return { ...it, sexName: m ? (m.label || '') : it.sexName }
  204 + })
  205 + },
  206 + openProductSheet(idx) {
  207 + const opts = this.selectOptions
  208 + const current = this.items[idx] && this.items[idx].sex
  209 + const match = opts.find(o => o.value === current)
  210 + this.sheet = { ...this.sheet, visible: true, title: '请选择性别', options: opts, idx, value: match ? match.value : '' }
  211 + },
  212 + onProductConfirm({ value, label }) {
  213 + const idx = this.sheet.idx
  214 + const it = this.items[idx]
  215 + if (!it) { this.sheet.visible = false; return }
  216 + it.sex = value
  217 + it.sexName = label || ''
  218 + this.$set(this.items, idx, it)
  219 + this.sheet.visible = false
  220 + this.emitChange()
  221 + },
  222 + onAdd() {
  223 + if (this.items.length >= this.max) return uni.showToast({ title: `最多添加${this.max}个`, icon: 'none' })
  224 + const obj = this.defaultItem()
  225 + obj.collapsed = true
  226 + this.items.push(obj)
  227 + this.emitChange()
  228 + },
  229 + onRemove(id) {
  230 + if (!id) return
  231 + uni.showModal({
  232 + title: '系统提示',
  233 + content: '是否确定删除选中的产品？',
  234 + confirmText: '确定',
  235 + cancelText: '取消',
  236 + success: (res) => {
  237 + if (res && res.confirm) {
  238 + const i = this.items.findIndex(it => String(it.personId) === String(id))
  239 + if (i >= 0) {
  240 + this.items.splice(i, 1)
  241 + this.emitChange()
  242 + }
  243 + }
  244 + }
  245 + })
  246 + },
  247 + toggleItem(idx) {
  248 + const it = this.items[idx]
  249 + if (!it) return
  250 + it.collapsed = !it.collapsed
  251 + this.$set(this.items, idx, it)
  252 + },
  253 + emitChange() {
  254 + const out = this.items.map(it => ({ ...it }))
  255 + this.$emit('input', out)
  256 + this.$emit('update:value', out)
  257 + this.$emit('change', out)
  258 + },
  259 + toggleViewCollapse() {
  260 + this.collapsedView = !this.collapsedView
  261 + }
  262 + }
  263 +}
  264 +</script>
  265 +<style lang="scss" scoped>
  266 +.header {
  267 + background-color: #fff;
  268 + display: flex;
  269 + align-items: center;
  270 + padding: 24rpx 32rpx;
  271 +
  272 + &.bp {
  273 + border-bottom: 1px solid #f0f0f0;
  274 + }
  275 +}
  276 +
  277 +.dot {
  278 + width: 16rpx;
  279 + height: 16rpx;
  280 + background: #3D48A3;
  281 + border-radius: 50%;
  282 + margin-right: 12rpx;
  283 +}
  284 +
  285 +.title {
  286 + font-size: 32rpx;
  287 + color: rgba(0, 0, 0, 0.9);
  288 + font-weight: 600;
  289 +}
  290 +
  291 +.ops {
  292 + margin-left: auto;
  293 +}
  294 +
  295 +.op {
  296 + color: $theme-primary;
  297 + font-size: 28rpx;
  298 + margin-left: 8rpx;
  299 +}
  300 +
  301 +.op1 {
  302 + display: flex;
  303 + align-items: center;
  304 +}
  305 +
  306 +.opAdd {
  307 + color: rgba(0, 0, 0, 0.6);
  308 + width: 40rpx;
  309 + height: 40rpx;
  310 +}
  311 +
  312 +.opCollapse {
  313 + color: rgba(0, 0, 0, 0.6);
  314 + width: 32rpx;
  315 + height: 28rpx;
  316 + margin-right: 16rpx;
  317 +}
  318 +
  319 +
  320 +::v-deep .uni-list {
  321 + background: transparent;
  322 +
  323 + &-item {
  324 + &__extra-text {
  325 + font-size: 32rpx;
  326 + }
  327 +
  328 + &__content-title {
  329 + font-size: 32rpx;
  330 + color: rgba(0, 0, 0, 0.9);
  331 + }
  332 +
  333 + &__container {
  334 + padding: 32rpx;
  335 +
  336 + .uni-easyinput {
  337 +
  338 + .is-disabled {
  339 + background-color: transparent !important;
  340 + }
  341 +
  342 + &__placeholder-class {
  343 + font-size: 32rpx;
  344 + color: rgba(0, 0, 0, 0.4);
  345 + }
  346 +
  347 + &__content {
  348 + border: none;
  349 +
  350 + &-input {
  351 + padding-left: 0 !important;
  352 + height: 48rpx;
  353 + line-height: 48rpx;
  354 + font-size: 32rpx;
  355 + }
  356 +
  357 + .content-clear-icon {
  358 + font-size: 44rpx !important;
  359 + }
  360 + }
  361 + }
  362 +
  363 + .amount-row {
  364 + flex: 1;
  365 + display: flex;
  366 + align-items: center;
  367 +
  368 + .uni-easyinput {
  369 + flex: 1;
  370 + }
  371 +
  372 + .unit {
  373 + margin-left: 16rpx;
  374 + color: rgba(0, 0, 0, 0.9);
  375 + }
  376 + }
  377 +
  378 + .item-title,
  379 + .uni-list-item__content {
  380 + flex: none;
  381 + min-height: 48rpx;
  382 + line-height: 48rpx;
  383 + font-size: 32rpx;
  384 + position: relative;
  385 + width: 162rpx;
  386 + margin-right: 32rpx;
  387 + color: rgba(0, 0, 0, 0.9);
  388 + padding-right: 0;
  389 +
  390 +
  391 + .required {
  392 + color: red;
  393 + position: absolute;
  394 + top: 50%;
  395 + transform: translateY(-50%);
  396 + left: -16rpx;
  397 + }
  398 + }
  399 +
  400 + }
  401 +
  402 + &.select-item {
  403 + &.is-empty {
  404 + .uni-list-item__extra-text {
  405 + color: rgba(0, 0, 0, 0.4) !important;
  406 + }
  407 + }
  408 +
  409 + &.is-filled {
  410 + .uni-list-item__extra-text {
  411 + color: rgba(0, 0, 0, 0.9) !important;
  412 + }
  413 + }
  414 +
  415 + .serial-number-row {
  416 + display: flex;
  417 + align-items: center;
  418 + }
  419 +
  420 + }
  421 +
  422 + &.mgb10 {
  423 + margin-bottom: 20rpx;
  424 + }
  425 +
  426 + }
  427 +
  428 + .title-header {
  429 + background-color: #fff;
  430 + display: flex;
  431 + align-items: center;
  432 + padding: 32rpx 32rpx 22rpx;
  433 +
  434 + &_icon {
  435 + width: 32rpx;
  436 + height: 28rpx;
  437 + margin-right: 16rpx;
  438 + }
  439 +
  440 + span {
  441 + color: rgba(0, 0, 0, 0.9);
  442 + font-size: 32rpx;
  443 + line-height: 44rpx;
  444 + font-weight: 600;
  445 + }
  446 + }
  447 +}
  448 +
  449 +/* 只读 easyinput 根据内容自适应高度 */
  450 +::v-deep .uni-list-item__container {
  451 + align-items: flex-start;
  452 +}
  453 +
  454 +.block-ops {
  455 + display: flex;
  456 + padding: 20rpx 32rpx 20rpx;
  457 + justify-content: space-around;
  458 +}
  459 +
  460 +.del {
  461 + color: #D54941;
  462 + font-size: 28rpx;
  463 + display: flex;
  464 + align-items: center;
  465 +
  466 + image {
  467 + width: 40rpx;
  468 + height: 40rpx;
  469 + }
  470 +}
  471 +
  472 +.toggle {
  473 + color: $theme-primary;
  474 + font-size: 28rpx;
  475 + display: flex;
  476 + align-items: center;
  477 +
  478 + image {
  479 + width: 40rpx;
  480 + height: 40rpx;
  481 + }
  482 +}
  483 +
  484 +.section {
  485 + background: #f1f1f1;
  486 + margin-bottom: 20rpx;
  487 +
  488 + .block {
  489 + background: #ffffff;
  490 + padding: 32rpx 0;
  491 + margin-bottom: 20rpx;
  492 +
  493 + &:last-child {
  494 + margin-bottom: 0;
  495 + }
  496 + }
  497 +
  498 + .row {
  499 + display: flex;
  500 + // margin-bottom: 24rpx;
  501 + line-height: 32rpx;
  502 + padding: 32rpx;
  503 + border-bottom: 1rpx solid #f2f2f2;
  504 +
  505 +
  506 + &.noneStyle {
  507 + border-bottom: 0;
  508 + border-bottom: none;
  509 + }
  510 +
  511 + &.row-spec {
  512 + align-items: center;
  513 + }
  514 + }
  515 +
  516 + .row:last-child {
  517 + margin-bottom: 0;
  518 + }
  519 +
  520 + .label {
  521 + width: 162rpx;
  522 + margin-right: 32rpx;
  523 + color: rgba(0, 0, 0, 0.9);
  524 + font-size: 32rpx;
  525 + line-height: 48rpx;
  526 + }
  527 +
  528 + .value {
  529 + flex: 1;
  530 + color: rgba(0, 0, 0, 0.9);
  531 + font-size: 32rpx;
  532 + white-space: pre-wrap;
  533 + word-break: break-all;
  534 + line-height: 48rpx;
  535 + }
  536 +
  537 + .value-spec {
  538 + height: 48rpx;
  539 + display: flex;
  540 + align-items: center;
  541 + color: #000000;
  542 +
  543 + &_box {
  544 + position: relative;
  545 + width: 60rpx;
  546 + height: 48rpx;
  547 +
  548 + &_1 {
  549 + font-size: 16rpx;
  550 + position: absolute;
  551 + top: -10rpx;
  552 + left: 0;
  553 + }
  554 +
  555 + &_2 {
  556 + font-size: 16rpx;
  557 + position: absolute;
  558 + bottom: -10rpx;
  559 + left: 0;
  560 + }
  561 + }
  562 +
  563 + &_val {
  564 + font-size: 28rpx;
  565 +
  566 + &.p12 {
  567 + padding-right: 12rpx;
  568 + }
  569 + }
  570 + }
  571 +
  572 + .view-total {
  573 + padding-top: 20rpx;
  574 +
  575 + .head {
  576 + font-size: 32rpx;
  577 + font-weight: 600;
  578 + line-height: 50rpx;
  579 + color: rgba(0, 0, 0, 0.9);
  580 + padding-bottom: 16rpx;
  581 + margin-bottom: 24rpx;
  582 + ;
  583 + border-bottom: 1px dashed #E7E7E7;
  584 + }
  585 +
  586 + .row {
  587 + display: flex;
  588 + margin-bottom: 24rpx;
  589 + line-height: 32rpx;
  590 +
  591 + .label {
  592 + width: 180rpx;
  593 + margin-right: 14rpx;
  594 + color: rgba(0, 0, 0, 0.6);
  595 + font-size: 28rpx;
  596 + }
  597 +
  598 + .value {
  599 + flex: 1;
  600 + color: rgba(0, 0, 0, 0.9);
  601 + font-size: 28rpx;
  602 + white-space: pre-wrap;
  603 + word-break: break-all;
  604 + }
  605 + }
  606 + }
  607 +}
  608 +
  609 +.view-list {
  610 + padding: 26rpx 32rpx;
  611 + background: #ffffff;
  612 +
  613 + .card {
  614 + background: #f3f3f3;
  615 + border-radius: 16rpx;
  616 + padding: 32rpx 44rpx;
  617 + margin-bottom: 20rpx;
  618 +
  619 + &:last-child {
  620 + margin-bottom: 0;
  621 + }
  622 + }
  623 +
  624 + .row {
  625 + display: flex;
  626 + margin-bottom: 24rpx;
  627 + line-height: 32rpx;
  628 +
  629 + &.row-spec {
  630 + height: 60rpx;
  631 + align-items: center;
  632 + }
  633 + }
  634 +
  635 + .row:last-child {
  636 + margin-bottom: 0;
  637 + }
  638 +
  639 + .label {
  640 + width: 140rpx;
  641 + margin-right: 14rpx;
  642 + color: rgba(0, 0, 0, 0.6);
  643 + font-size: 28rpx;
  644 + }
  645 +
  646 + .value {
  647 + flex: 1;
  648 + color: rgba(0, 0, 0, 0.9);
  649 + font-size: 28rpx;
  650 + white-space: pre-wrap;
  651 + word-break: break-all;
  652 + }
  653 +
  654 + .value-spec {
  655 + height: 60rpx;
  656 + display: flex;
  657 + align-items: center;
  658 + color: #000000;
  659 +
  660 + &_box {
  661 + position: relative;
  662 + width: 60rpx;
  663 + height: 60rpx;
  664 +
  665 + &_1 {
  666 + font-size: 16rpx;
  667 + position: absolute;
  668 + top: 0;
  669 + left: 0;
  670 + }
  671 +
  672 + &_2 {
  673 + font-size: 16rpx;
  674 + position: absolute;
  675 + bottom: 0;
  676 + left: 0;
  677 + }
  678 + }
  679 +
  680 + &_val {
  681 + font-size: 28rpx;
  682 +
  683 + &.p12 {
  684 + padding-right: 12rpx;
  685 + }
  686 + }
  687 + }
  688 +
  689 + .view-total {
  690 + padding-top: 20rpx;
  691 +
  692 + .head {
  693 + font-size: 32rpx;
  694 + font-weight: 600;
  695 + line-height: 50rpx;
  696 + color: rgba(0, 0, 0, 0.9);
  697 + padding-bottom: 16rpx;
  698 + margin-bottom: 24rpx;
  699 + ;
  700 + border-bottom: 1px dashed #E7E7E7;
  701 + }
  702 +
  703 + .row {
  704 + display: flex;
  705 + margin-bottom: 24rpx;
  706 + line-height: 32rpx;
  707 +
  708 + .label {
  709 + width: 180rpx;
  710 + margin-right: 14rpx;
  711 + color: rgba(0, 0, 0, 0.6);
  712 + font-size: 28rpx;
  713 + }
  714 +
  715 + .value {
  716 + flex: 1;
  717 + color: rgba(0, 0, 0, 0.9);
  718 + font-size: 28rpx;
  719 + white-space: pre-wrap;
  720 + word-break: break-all;
  721 + }
  722 + }
  723 + }
  724 +}
  725 +</style>
... ...