Commit 1718ab08cc680eae21a575a2e387a29f424a4650

Authored by gesilong
1 parent 8359d20b

commit : 申请锁规单

  1 +<template>
  2 + <view class="page">
  3 + <view class="detail-page">
  4 + <view class="section">
  5 + <uni-list>
  6 + <uni-list-item title="客户名称">
  7 + <template v-slot:footer>
  8 + <uni-easyinput v-model="detail.customerName" :clearable="false" disabled />
  9 + </template>
  10 + </uni-list-item>
  11 + <uni-list-item title="订单编号">
  12 + <template v-slot:footer>
  13 + <uni-easyinput v-model="detail.contractCode" :clearable="false" disabled />
  14 + </template>
  15 + </uni-list-item>
  16 + <uni-list-item title="办事处">
  17 + <template v-slot:footer>
  18 + <uni-easyinput v-model="detail.deptName" :clearable="false" disabled />
  19 + </template>
  20 + </uni-list-item>
  21 + <uni-list-item title="所属分厂">
  22 + <template v-slot:footer>
  23 + <uni-easyinput v-model="detail.workshopName" :clearable="false" disabled />
  24 + </template>
  25 + </uni-list-item>
  26 + <uni-list-item title="订单类型">
  27 + <template v-slot:footer>
  28 + <uni-easyinput v-model="detail.contractType" :clearable="false" disabled />
  29 + </template>
  30 + </uni-list-item>
  31 + <uni-list-item title="原订货日期">
  32 + <template v-slot:footer>
  33 + <uni-easyinput v-model="detail.orderDate" :clearable="false" disabled />
  34 + </template>
  35 + </uni-list-item>
  36 + <uni-list-item title="第几次申请">
  37 + <template v-slot:footer>
  38 + <uni-easyinput v-model="detail.applicationCount" :clearable="false" disabled />
  39 + </template>
  40 + </uni-list-item>
  41 + <uni-list-item title="制单日期">
  42 + <template v-slot:footer>
  43 + <uni-easyinput v-model="detail.contractDocumentDate" :clearable="false" disabled />
  44 + </template>
  45 + </uni-list-item>
  46 + <uni-list-item title="数量">
  47 + <template v-slot:footer>
  48 + <uni-easyinput v-model="detail.totalQuantity" :clearable="false" disabled />
  49 + </template>
  50 + </uni-list-item>
  51 + </uni-list>
  52 + </view>
  53 +
  54 + <view class="section1">
  55 + <uni-list>
  56 + <uni-list-item title="现申请锁规格日期">
  57 + <template v-slot:footer>
  58 + <uni-easyinput v-model="detail.specLockDate" disabled/>
  59 + </template>
  60 + </uni-list-item>
  61 + <uni-list-item title="延迟原因">
  62 + <template v-slot:footer>
  63 + <uni-easyinput v-model="detail.delayReason" disabled />
  64 + </template>
  65 + </uni-list-item>
  66 + </uni-list>
  67 + </view>
  68 + </view>
  69 + </view>
  70 +</template>
  71 +
  72 +<script>
  73 +import { getSpecDetailApi } from '@/api/contract'
  74 +export default {
  75 + name: 'SpecLockDelayViewer',
  76 + props: {
  77 + id: {
  78 + type: String,
  79 + default: ''
  80 + }
  81 + },
  82 + data() {
  83 + return {
  84 + detail: {
  85 + contractCode: '',
  86 + customerName: '',
  87 + deptName: '',
  88 + workshopName: '',
  89 + orderType: '',
  90 + orderTypeName: '',
  91 + orderDate: '',
  92 + applicationCount: '',
  93 + contractDocumentDate: '',
  94 + totalQuantity: ''
  95 + },
  96 + form: { specLockDate: '', delayReason: '' }
  97 + }
  98 + },
  99 +
  100 + watch: {
  101 + id: {
  102 + immediate: true,
  103 + handler(val) {
  104 + console.log(val,'555555555555')
  105 + const v = (val !== undefined && val !== null) ? String(val) : ''
  106 + if (v) this.loadDetail(v)
  107 + }
  108 + }
  109 + },
  110 + methods: {
  111 + async loadDetail(id) {
  112 + if (!id) return
  113 + try {
  114 + const res = await getSpecDetailApi(id)
  115 + const data = res && res.data ? res.data : {}
  116 + this.detail = {
  117 + contractCode: data.contractCode || '',
  118 + customerName: data.customerName || '',
  119 + deptName: data.deptName || '',
  120 + workshopName: data.workshopName || '',
  121 + orderType: data.orderType || '',
  122 + contractType: data.contractType === 'DRAFT_DIST_AGMT' ? '经销订单' : '外贸订单',
  123 + orderDate: (data.orderDate || '').slice(0, 10),
  124 + applicationCount: data.applicationCount || '',
  125 + contractDocumentDate: (data.contractDocumentDate || '').slice(0, 10),
  126 + totalQuantity: data.totalQuantity || '',
  127 + specLockDate: data.specLockDate || '',
  128 + delayReason: data.delayReason || '',
  129 + }
  130 + } catch (e) {
  131 + this.detail = { ...this.detail }
  132 + }
  133 + },
  134 + }
  135 +}
  136 +</script>
  137 +
  138 +<style lang="scss" scoped>
  139 +.page {
  140 + display: flex;
  141 + flex-direction: column;
  142 + height: 100%;
  143 +}
  144 +
  145 +.scroll {
  146 + flex: 1;
  147 + padding: 8rpx 0 144rpx;
  148 +}
  149 +
  150 +.detail-page {
  151 + background: #f3f3f3;
  152 +}
  153 +
  154 +.section {
  155 + background: #fff;
  156 + margin-bottom: 20rpx;
  157 +}
  158 +.section1 {
  159 + background: #fff;
  160 + margin-bottom: 20rpx;
  161 +}
  162 +
  163 +.row {
  164 + display: flex;
  165 + margin-bottom: 20rpx;
  166 + align-items: center;
  167 +}
  168 +
  169 +.row:last-child {
  170 + margin-bottom: 0;
  171 +}
  172 +
  173 +.label {
  174 + width: 280rpx;
  175 + color: rgba(0, 0, 0, 0.6);
  176 + font-size: 28rpx;
  177 +}
  178 +
  179 +.value {
  180 + flex: 1;
  181 + text-align: right;
  182 + color: rgba(0, 0, 0, 0.9);
  183 + font-size: 28rpx;
  184 +}
  185 +
  186 +.customer {
  187 + font-weight: 600;
  188 + font-size: 36rpx;
  189 + color: rgba(0, 0, 0, 0.9);
  190 + padding-bottom: 12rpx;
  191 +}
  192 +
  193 +.footer {
  194 + position: fixed;
  195 + left: 0; right: 0; bottom: 0;
  196 + padding: 24rpx 32rpx 48rpx;
  197 + background: #fff;
  198 + box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.06);
  199 +}
  200 +.footer .btn { height: 80rpx; line-height: 80rpx; border-radius: 12rpx; font-size: 32rpx; }
  201 +.footer .submit { background: $theme-primary; color: #fff; }
  202 +
  203 +::v-deep .uni-list {
  204 + .uni-easyinput {
  205 + display: flex;
  206 +
  207 + .uni-input-input {
  208 + color: rgba(0, 0, 0, 0.9);
  209 + }
  210 + }
  211 +
  212 + .uni-input-placeholder {
  213 + z-index: 1;
  214 + }
  215 +
  216 + .uni-input-input {
  217 + background-color: #ffffff;
  218 + }
  219 +
  220 + background: transparent;
  221 +
  222 + &-item {
  223 + &__extra-text {
  224 + font-size: 32rpx;
  225 + }
  226 +
  227 + &__content-title {
  228 + font-size: 32rpx;
  229 + color: rgba(0, 0, 0, 0.9);
  230 + }
  231 +
  232 + &__container {
  233 + padding: 32rpx;
  234 +
  235 + .uni-easyinput {
  236 + &__placeholder-class {
  237 + font-size: 32rpx;
  238 + color: rgba(0, 0, 0, 0.4);
  239 + }
  240 +
  241 + &__content {
  242 + border: none;
  243 + background-color: #ffffff !important;
  244 +
  245 + &-input {
  246 + padding-left: 0 !important;
  247 + height: 48rpx;
  248 + line-height: 48rpx;
  249 + font-size: 32rpx;
  250 + }
  251 +
  252 + .content-clear-icon {
  253 + font-size: 44rpx !important;
  254 + }
  255 + }
  256 + }
  257 +
  258 + .item-title,
  259 + .uni-list-item__content {
  260 + flex: none;
  261 + min-height: 48rpx;
  262 + line-height: 48rpx;
  263 + font-size: 32rpx;
  264 + position: relative;
  265 + width: 162rpx;
  266 + margin-right: 32rpx;
  267 + color: rgba(0, 0, 0, 0.9);
  268 +
  269 + .required {
  270 + color: red;
  271 + position: absolute;
  272 + top: 50%;
  273 + transform: translateY(-50%);
  274 + left: -16rpx;
  275 + }
  276 + }
  277 + }
  278 +
  279 + &.select-item {
  280 + &.is-empty {
  281 + .uni-list-item__extra-text {
  282 + color: rgba(0, 0, 0, 0.4) !important;
  283 + }
  284 + }
  285 +
  286 + &.is-filled {
  287 + .uni-list-item__extra-text {
  288 + color: rgba(0, 0, 0, 0.9) !important;
  289 + }
  290 + }
  291 + }
  292 +
  293 + &.mgb10 {
  294 + margin-bottom: 20rpx;
  295 + }
  296 + }
  297 +}
  298 +
  299 +// ::v-deep .uni-list-item__container {
  300 +// padding: 32rpx;
  301 +// }
  302 +
  303 +::v-deep .is-disabled {
  304 + background-color: transparent !important;
  305 +}
  306 +// ::v-deep .uni-list-item__content-title {
  307 +// font-size: 28rpx;
  308 +// color: rgba(0, 0, 0, 0.9);
  309 +// }
  310 +
  311 +// ::v-deep .uni-list-item__extra-text {
  312 +// font-size: 32rpx;
  313 +// }
  314 +
  315 +::v-deep .uni-easyinput {
  316 + width: 100%;
  317 +}
  318 +
  319 +::v-deep .uni-easyinput__placeholder-class {
  320 + font-size: 32rpx;
  321 + color: rgba(0, 0, 0, 0.4);
  322 +}
  323 +
  324 +::v-deep .uni-easyinput__content {
  325 + border: none;
  326 + display: flex;
  327 +}
  328 +
  329 +::v-deep .uni-easyinput__content-input {
  330 + padding-left: 0 !important;
  331 + height: 48rpx;
  332 + line-height: 48rpx;
  333 + font-size: 32rpx;
  334 + color: rgba(0, 0, 0, 0.9);
  335 +}
  336 +</style>