rtk-wms-uniapp/pages/workbranch/production/FQC/fqcCheckout.vue

<template>
  <gui-page
    :custom-header="true"
    :is-header-sized="false"
    :header-class="['gui-theme-background-color', isLandscapeScreen ? 'width: 100vmax;' : '']"
    :style="[isLandscapeScreen ? 'width: 100vmax' : '']"
  >
    <template #gHeader>
      <view
        :style="[isLandscapeScreen ? 'height:44px;width: 100vmax' : 'height:44px;']"
        class="gui-flex gui-nowrap gui-rows gui-align-items-center"
      >
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goBack"
        >
          &#xe6c5;
        </text>
        <!-- <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goHome"
        >
          &#xe6c5;
        </text> -->
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          :style="[isPad ? 'font-size: 18px' : 'font-size: 14px']"
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text"
        >
          IQC检验
        </text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
      </view>
    </template>

    <template #gBody>
      <view class="oqc-checkout">
        <view class="card-list-flexbox">
          <!-- <text class="card-list-title" :style="[isPad?'font-size: 18px':'font-size: 14px']">FQC检验信息</text> -->
          <!-- <view class="card-list-item">
            <text>日期</text>
            <text>{{ $parseTime(OQCParams.produceDateStr) }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>订单号</text>
            <text>{{ OQCParams.saleOutNo }}</text>
          </view>
          <view class="card-list-item">
            <text>客户名称</text>
            <text>{{ OQCParams.customerName }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>产品批号</text>
            <text>{{ OQCParams.materialLotsStr }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>产品名称</text>
            <text>{{ OQCParams.materialName }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>出货数量</text>
            <text>{{ OQCParams.deliveredQty }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>产品阶段</text>
            <text>{{ OQCParams.productPhase }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>班别</text>
            <text>{{ OQCParams.classFlag }}</text>
          </view> -->
          <!-- <view class="card-list-item">
            <text>有效期</text>
            <text>{{ OQCParams.expirationDate }}</text>
          </view> -->

          <view class="card-list-item">
            <text>采购订单</text>
            <text>{{ OQCParams.purchaseOrderNo }}</text>
          </view>
          <view class="card-list-item">
            <text>物料批次</text>
            <text>{{ OQCParams.materialLots }}</text>
          </view>
          <view class="card-list-item">
            <text>物料名称</text>
            <text>{{ OQCParams.materialName }}</text>
          </view>
          <view class="card-list-item">
            <text>物料编码</text>
            <text>{{ OQCParams.materialNo }}</text>
          </view>
          <view class="card-list-item">
            <text>检验数量</text>
            <text>{{ OQCParams.receiptQty }}</text>
          </view>
        </view>

        <!-- 表格 -->
        <view class="custom-table">
          <uni-table border stripe empty-text="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr class="custom-table-head">
              <uni-th align="center" width="60px">序号</uni-th>
              <uni-th align="center" width="140px">是否检验</uni-th>
              <uni-th align="center" width="240px">检验名称</uni-th>
              <uni-th align="center" width="140px">巡检频次</uni-th>
              <uni-th align="center" width="140px">检验工具</uni-th>
              <uni-th align="center" width="140px">标准值</uni-th>
              <uni-th align="center" width="140px">修饰符</uni-th>
            </uni-tr>

            <!-- 表格数据行 -->
            <uni-tr
              v-for="(item, key) in OQCItemList"
              :key="key"
              @click="handleShowModal(item)"
            >
              <uni-td align="center" width="120px">{{ ++key }}</uni-td>

              <uni-td align="center">
                <view style="display: flex;justify-content: center;align-items: center;">
                  <text
                    v-if="item.completed"
                    class="font-icons"
                    :style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #2dc252']"
                  >
                    &#xe6dd;
                  </text>
                  <text
                    v-else
                    class="font-icons"
                    :style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #6a6a6a']"
                  >
                    &#xe6e0;
                  </text>
                  <text v-if="item.voidOrNot*1 === 1" style="margin-left: 4px;">报废</text>
                  <text v-else style="margin-left: 4px;">{{ item.completed? '已检': '未检' }}</text>
                </view>
              </uni-td>

              <uni-td
                align="center"
                :style="[item.voidOrNot*1 === 1?'text-decoration: line-through;':'']"
              >
                {{ item.inspectionName }}
              </uni-td>
              <uni-td
                align="center"
                :style="[item.voidOrNot*1 === 1?'text-decoration: line-through;':'']"
              >
                {{ item.checkQuantity }}
              </uni-td>
              <uni-td
                align="center"
                :style="[item.voidOrNot*1 === 1?'text-decoration: line-through;':'']"
              >
                {{ item.tool }}
              </uni-td>
              <uni-td
                align="center"
                :style="[item.voidOrNot*1 === 1?'text-decoration: line-through;':'']"
              >
                {{ item.standValue }}
              </uni-td>
              <uni-td
                align="center"
                :style="[item.voidOrNot*1 === 1?'text-decoration: line-through;':'']"
              >
                {{ item.standard }}
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>

      <!-- 底部弹窗 -->
      <uni-popup ref="popup" background-color="#fff" :mask-click="false">
        <view class="popup-content">
          <view class="card-list-flexbox-popup">
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">{{ submitOQCItem.inspectionName }}</text>
            </view>

            <view class="card-list-item">
              <text class="text-1 gui-color-gray">检验工具</text>
              <text class="text-2 gui-color-gray">{{ submitOQCItem.tool }}</text>
            </view>

            <view class="card-list-item">
              <text class="text-1 gui-color-gray">检验频次</text>
              <text class="text-2 gui-color-gray">{{ submitOQCItem.checkQuantity }}</text>
            </view>

            <view class="card-list-item">
              <text class="text-1 gui-color-gray">检验标准</text>
              <text class="text-2 gui-color-gray">{{ submitOQCItem.standard }}</text>
            </view>

            <view class="card-list-item">
              <text class="text-1 gui-color-gray">是否合格</text>
              <text class="text-2 gui-color-gray">
                <radio-group style="width: inherit;" @change="radioChange">
                  <view style="display: grid;grid-template-rows: 1fr; grid-template-columns: 1fr 1fr;">
                    <label>
                      <view style="display: flex;justify-content: center;align-items: center;">
                        <radio value="1" :checked="submitOQCItem.singleResult*1 === 1?true:false" />
                        <view>合格</view>
                      </view>
                    </label>
                    <label>
                      <view style="display: flex;justify-content: center;align-items: center;">
                        <radio value="0" :checked="submitOQCItem.singleResult*1 === 0?true:false" />
                        <view>不合格</view>
                      </view>
                    </label>
                  </view>
                </radio-group>
              </text>
            </view>

            <!-- 检验模型 0 -->
            <view v-if="submitOQCItem.inspectionModel === 0" class="card-list-item-input">
              <view
                v-for="(item, key) in submitOQCItem.actualCreateReqVOS"
                :key="key"
                style="margin: 4px 0;"
              >
                <text
                  v-if="item.qualified === 1"
                  class="font-icons"
                  style="font-size: 22px;height: auto;color: #2dc252;padding: 0 6px;"
                >
                  &#xe6dd;
                </text>
                <text
                  v-else
                  class="font-icons"
                  style="font-size: 22px;height: auto;color: red;padding: 0 6px;"
                >
                  &#xe6e0;
                </text>
                <textarea
                  v-model="submitOQCItem.actualCreateReqVOS[key].actual"
                  class="text-3 gui-color-gray"
                  inputmode="decimal"
                  placeholder="请输入检验内容"
                  style="border-radius: 4px;border: 1px dotted gray;"
                  auto-height
                  maxlength="14"
                />
                <view
                  v-if="key === submitOQCItem.actualCreateReqVOS.length - 1"
                  class="operation-icon"
                  @click="appendRow(item)"
                >
                  <text class="font-icons" :style="[isPad?'font-size: 18px':'font-size: 14px']">
                    &#xe664;
                  </text>
                </view>
                <view v-else class="operation-icon-2" @click="deleteRow(item, key)">
                  <text class="font-icons" :style="[isPad?'font-size: 18px':'font-size: 14px']">
                    &#xe677;
                  </text>
                </view>
              </view>
            </view>

            <!-- 检验模型 1 -->
            <view v-if="submitOQCItem.inspectionModel === 1" class="card-list-item-input">
              <textarea
                v-model="submitOQCItem.measuredResults"
                class="text-3 gui-color-gray"
                inputmode="text"
                placeholder="请输入检验内容"
                style="border-radius: 4px;border: 1px dotted gray;margin: 2px 4px;"
                auto-height
                maxlength="14"
              />
            </view>

            <!-- 图片预览 -->
            <view v-if="submitOQCItem.src?.length > 0" class="card-list-item">
              <text class="text-1">上传图片预览：</text>
            </view>
            <view
              v-if="submitOQCItem.src?.length > 0"
              class="card-list-item grid-image"
              style="margin: 12px 0"
            >
              <image
                v-for="(item, key) in submitOQCItem.src"
                :key="key"
                :src="item"
                mode="scaleToFill"
                @click="handleRemoveImage(item, key)"
              />
            </view>

            <!-- 拍照 / 提交 -->
            <view v-if="OQCParams.auditStatus === -1" class="card-list-item">
              <button class="text-1 btn-mg" type="primary" @click="takePhoto">拍照</button>
            </view>
            <view class="card-list-item" style="margin: 12px 0">
              <button
                v-if="OQCParams.auditStatus === -1"
                class="text-1 btn-mg"
                type="primary"
                @click="handleSubmit"
              >
                提交数据
              </button>
              <button
                class="text-1 btn-mg"
                type="default"
                @click="$refs['popup'].close()"
              >
                关闭
              </button>
            </view>
          </view>
        </view>
      </uni-popup>

      <!-- 右侧悬浮菜单 -->
      <gui-right-menus>
        <template #menus-more>
          <view
            v-if="OQCParams.auditStatus === -1"
            hover-class="gui-tap"
            class="menu-items gui-bg-green gui-flex gui-columns gui-justify-content-center"
            @click="handleShowSubmitApprovalModal"
          >
            <text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
          </view>
          <view
            v-else
            hover-class="gui-tap"
            class="menu-items gui-flex gui-columns gui-justify-content-center"
            style="background-color: #717171;"
          >
            <text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
          </view>
        </template>

        <template #menus-primary>
          <view class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center">
            <text class="menu-icon gui-color-white gui-block gui-text-center gui-icons">&#xe614;</text>
            <text class="menu-text gui-color-white gui-block gui-text-center">操作</text>
          </view>
        </template>
      </gui-right-menus>

      <!-- 送审确认模态框 -->
      <gui-modal
        ref="modalForm"
        :custom-class="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']"
        title="提示"
      >
        <template #content>
          <view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
            <text
              class="gui-block gui-text-center gui-text gui-color-gray"
              style="line-height:100rpx; padding:10rpx;"
            >
              您确定要立即送审吗？
            </text>
          </view>
        </template>

        <template #btns>
          <view class="gui-flex gui-row gui-space-between operation-flex">
            <view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleCancelApprovalModal">
              <text class="modal-btns gui-color-gray">取消</text>
            </view>
            <view class="line" />
            <view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleSubmitApprovalModal">
              <text class="modal-btns gui-primary-color">确认</text>
            </view>
          </view>
        </template>
      </gui-modal>

      <!-- 错误提示 -->
      <uni-popup ref="errorTip" type="dialog">
        <uni-popup-dialog
          type="error"
          cancel-text="关闭"
          confirm-text="确认"
          title="提示"
          :content="errorTipMessage"
          @confirm="handleCloseErrorTipsModal"
          @close="handleCloseErrorTipsModal"
        />
      </uni-popup>
    </template>
  </gui-page>
</template>

<script>
import axios from 'axios'
import { computed, defineComponent, ref, onMounted, onBeforeMount } from 'vue'

export default defineComponent({
  onLoad() {
    // // #ifdef APP-PLUS
    // plus.screen.lockOrientation('default');
    // // #endif
  },
  onUnload() {
    // // #ifdef APP-PLUS
    // plus.screen.lockOrientation('portrait-primary');
    // // #endif
  },
  onResize() {
    if ([90, -90].includes(plus.navigator.getOrientation())) {
      this.isLandscapeScreen = true
    } else {
      this.isLandscapeScreen = false
    }
  },
  setup(options) {
    const popup = ref()
    const modalForm = ref()
    const isLandscapeScreen = ref(false)

    // 直接从路径中获取id参数，优先从本地存储获取（模仿scanOutPage.vue实现）
    let parentRow = {}
    let receivedId = null

    try {
      // 方法1：优先从本地存储获取id
      const masterIdStr = uni.getStorageSync('masterId')
      if (masterIdStr) {
        const masterIdData = JSON.parse(masterIdStr)
        receivedId = masterIdData?.id
        console.log('从本地存储获取的id:', receivedId)
        // 移除已使用的本地存储数据
        uni.removeStorageSync('masterId')
      } else {
        // 方法2：从onLoad的options中直接获取id
        if (options?.id) {
          receivedId = options.id
          console.log('从options获取的id:', receivedId)
        } else {
          // 方法3：通过getCurrentPages()获取当前页面参数
          const pages = getCurrentPages()
          const currentPage = pages[pages.length - 1]
          if (currentPage?.options?.id) {
            receivedId = currentPage.options.id
            console.log('从currentPage.options获取的id:', receivedId)
          } else {
            // 方法4：直接解析URL获取id
            const url = window.location.href
            console.log('当前页面完整URL:', url)
            const idMatch = url.match(/[?&]id=([^&]+)/)
            if (idMatch && idMatch[1]) {
              receivedId = decodeURIComponent(idMatch[1])
              console.log('从URL解析的id:', receivedId)
            }
          }
        }
      }

      // 将id放入parentRow对象中，保持与原有代码结构兼容
      if (receivedId) {
        parentRow.id = receivedId
        console.log('parentRow对象:', parentRow)
      }
    } catch (error) {
      console.error('获取id参数失败:', error)
    }

    // 绑定的检查人信息
    const OQCParams = ref({
      auditStatus: null,
      materialLots: '',
      materialLotsStr: '',
      customerName: '',
      deliveredQty: '',
      expirationDate: '',
      materialName: '',
      produceDateStr: '',
      saleOutNo: '',
      version: 0,
      productPhase: '',
      processNo: '',
      materialNo: '',
      classFlag: '', // 班别
      wmsSaleOutOrderId: '',
    })

    const OQCItemList = ref([])

    // 待巡检项信息
    const submitOQCItem = ref({
      src: [],
      singleResult: '',
      measuredResults: null,
      id: '',
      inspectionModel: null,
      actualCreateReqVOS: [{ id: '', actual: 0 }],
      fileIds: [],
    })

    const errorState = ref(0)
    const errorTip = ref('')
    const errorTipMessage = ref('')

    onBeforeMount(() => {
      console.log('parentRow类型:', typeof parentRow)
      console.log('parentRow值:', parentRow)
      OQCParams.value.wmsSaleOutOrderId = parentRow?.id
      console.log('设置的wmsSaleOutOrderId:', OQCParams.value.wmsSaleOutOrderId)
    })

    onMounted(() => {
      handleBindOQCHeader()
    })

    const goHome = function () {
      uni.$goHome()
    }
    const goBack = function () {
      uni.$goBack('/pages/workbranch/production/FQC/fqcList')
    }

    const appendRow = function (row) {
      submitOQCItem.value.actualCreateReqVOS.push({ id: '', actual: '' })
    }
    const deleteRow = function (row, index) {
      submitOQCItem.value.actualCreateReqVOS.splice(index, 1)
    }

    // 绑定FQC检验表头
    const handleBindOQCHeader = async function () {
      await uni
        .$reqPost('getFQCItem', {
          wmsIncomingReceiptInspectionId: OQCParams.value.wmsSaleOutOrderId,
        })
        .then((data) => {
          OQCItemList.value = data?.list
          OQCParams.value.customerName = data?.customerName
          OQCParams.value.classFlag = data?.classFlag
          OQCParams.value.version = data?.version
          OQCParams.value.materialNo = data?.materialNo
          OQCParams.value.productPhase = data?.productPhase
          OQCParams.value.processNo = data?.processNo
          OQCParams.value.deliveredQty = data?.deliveredQty
          OQCParams.value.expirationDate = data?.expirationDate
          OQCParams.value.materialLotsStr = data?.materialLotsStr
          OQCParams.value.materialLots = data?.materialLots
          OQCParams.value.materialName = data?.materialName
          OQCParams.value.auditStatus = data?.auditStatus
          OQCParams.value.produceDateStr = data?.produceDateStr
          OQCParams.value.saleOutNo = data?.saleOutNo
          OQCParams.value.receiptQty = data?.receiptQty
          OQCParams.value.purchaseOrderNo = data?.purchaseOrderNo
        })
    }

    const scinumToFloat = function (num) {
      if (isNaN(num)) return num
      const str = '' + num
      if (!/e/i.test(str)) return num
      return num.toFixed(18).replace(/\.?0+$/, '')
    }

    // 开始检验
    const handleShowModal = function (opt) {
      if (opt?.voidOrNot * 1 !== 1) {
        Object.assign(submitOQCItem.value, opt)
        submitOQCItem.value.id = opt?.id
        submitOQCItem.value.inspectionModel = opt?.inspectionModel

        uni.$reqGet('getResult', { id: opt?.id }).then(({ code, data, msg }) => {
          if (code === 0) {
            if (popup.value?.showPopup === false) popup.value.open('bottom')

            if (
              data.actualDOS !== null &&
              Object.prototype.toString.call(data.actualDOS) === '[object Array]' &&
              data.actualDOS.length > 0
            ) {
              submitOQCItem.value.actualCreateReqVOS.length = 0
              data?.actualDOS.forEach((item) => {
                const actual = scinumToFloat(item?.actual)
                submitOQCItem.value.actualCreateReqVOS.push({ ...item, actual })
              })
            } else {
              submitOQCItem.value.actualCreateReqVOS = [{ id: '', actual: '' }]
            }

            if (data.fileIds !== null) submitOQCItem.value.fileIds = data?.fileIds ?? []
            submitOQCItem.value.measuredResults = data?.measuredResults ?? ''
            submitOQCItem.value.src = data?.urlList ?? []
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = -1
          }
        })
      }
    }

    const handleSubmit = async function () {
      const actualCreateReqVOS = []
      if (submitOQCItem.value.inspectionModel === 0) {
        try {
          submitOQCItem.value.actualCreateReqVOS.forEach((item) => {
            if (isNaN(Number(item.actual))) {
              throw new Error('请填写正确的数值！')
            } else {
              actualCreateReqVOS.push({ id: '', ...item, actual: item.actual })
            }
          })
        } catch (e) {
          uni.showToast({ title: e.message, duration: 2000, icon: 'none' })
          return
        }
      }

      const params = {
        fileIds: submitOQCItem.value.fileIds,
        actualCreateReqVOS,
        singleResult: submitOQCItem.value.singleResult,
        measuredResults: submitOQCItem.value.measuredResults,
        id: submitOQCItem.value.id,
        materialLots: OQCParams.value.materialLots,
        inspectionModel: submitOQCItem.value.inspectionModel,
        processNo: OQCParams.value.processNo,
      }

      if (params.singleResult === '□OK ■NG') params.singleResult = '0'
      else if (params.singleResult === '■OK □NG') params.singleResult = '1'

      const data = await uni.$reqPut('submitItem', params)
      if (data?.code === 0) {
        uni.showToast({ title: '数据提交成功！', duration: 2000, icon: 'none' })
        popup.value.close()
        handleBindOQCHeader()
      } else {
        // #ifdef APP-PLUS
        plus.device.beep(2)
        // #endif
        errorTipMessage.value = data?.msg ?? ''
        errorTip.value.open()
        errorState.value = -1
      }
    }

    // 拍照
    const takePhoto = function () {
      uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          res.tempFilePaths.forEach(async (item) => {
            // #ifdef APP-PLUS
            await uni.uploadFile({
              url: uni.$baseUrl + '/admin-api/minio/files/uploadFiles',
              name: 'file',
              filePath: item,
              header: { Authorization: 'Bearer ' + uni.getStorageSync('token') },
              success: function (uploadFileRes) {
                const resultJSON = JSON.parse(uploadFileRes.data)
                if (submitOQCItem.value.fileIds === null) submitOQCItem.value.fileIds = []
                submitOQCItem.value.fileIds.push(resultJSON.data.fileId)
              },
            })
            // #endif
            submitOQCItem.value.src.push(item)
          })

          res.tempFiles.forEach(async (item) => {
            // #ifdef H5
            const formData = new FormData()
            formData.append('file', item)
            const { data } = await axios({
              url: uni.$baseUrl + '/admin-api/minio/files/uploadFiles',
              name: '上传文件',
              method: 'post',
              headers: {
                Authorization: 'Bearer ' + uni.getStorageSync('token'),
                'Content-Type': 'multipart/form-data;',
              },
              data: formData,
            })
            if (submitOQCItem.value.fileIds === null) submitOQCItem.value.fileIds = []
            submitOQCItem.value.fileIds.push(data.data.fileId)
            // #endif
          })
        },
      })
    }

    const radioChange = function (item) {
      submitOQCItem.value.singleResult = item?.detail?.value
    }

    const handleRemoveImage = function (opt, index) {
      submitOQCItem.value.fileIds.splice(index, 1)
      submitOQCItem.value.src.splice(index, 1)
    }

    const handleShowSubmitApprovalModal = function () {
      modalForm.value.open()
    }
    const handleCancelApprovalModal = function () {
      modalForm.value.close()
    }
    const handleSubmitApprovalModal = function () {
      const params = {
        version: OQCParams.value.version,
        materialLots: OQCParams.value.materialLots,
        processNo: OQCParams.value.processNo,
        materialNo: OQCParams.value.materialNo,
      }
      uni.$reqPost('submitApproval', params)
        .then(({ code, data, msg }) => {
          if (code === 0) {
            uni.showToast({ title: '送审成功！', duration: 2000, icon: 'none' })
            handleBindOQCHeader()
          } else {
            uni.showToast({ title: msg, duration: 2000, icon: 'none' })
          }
        })
        .finally(() => {
          modalForm.value.close()
        })
    }

    const handleCloseErrorTipsModal = async function () {
      errorTip.value.close()
    }

    return {
      goHome,
      popup,
      goBack,
      modalForm,
      takePhoto,
      OQCItemList,
      errorState,
      errorTip,
      errorTipMessage,
      appendRow,
      deleteRow,
      isLandscapeScreen,
      OQCParams,
      radioChange,
      handleBindOQCHeader,
      handleShowModal,
      handleSubmit,
      submitOQCItem,
      handleRemoveImage,
      handleShowSubmitApprovalModal,
      handleCancelApprovalModal,
      handleSubmitApprovalModal,
      handleCloseErrorTipsModal,
    }
  },
})
</script>

<style lang="scss" scoped>
.gui-header-leader-btns {
  color: black;
  font-size: 24px !important;
  margin-left: 24rpx;
}
.gui-sbody {
  background-color: rgba(234, 239, 242, 1);
}
.gui-relative {
  overflow: visible;
  height: 100vh;
  .oqc-checkout {
    width: 100vw;
    height: calc(100vh - 75px);
    position: absolute;
    top: 95px;
    overflow: hidden;
  }
}

.card-list-flexbox {
  width: calc(100vw - 24px);
  margin: 0 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;

  .card-list-title {
    width: 100%;
    height: 35px;
    line-height: 35px;
    margin: 0 4px 0 4px;
    border-radius: 4px 4px 0 0;
    text-align: center;
    color: white;
    background-color: rgba(0, 160, 233, 1);
  }

  .card-list-item,
  .card-list-item-operation {
    width: 100%;
    height: 35px;
    margin: 0 4px 3rpx 4px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;

    uni-text {
      font-size: 14px;
      height: 50rpx;
      text-align: left;
      padding: 0 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .text-1 {
      flex: 1;
      height: 35px;
      justify-content: flex-start;
    }
    .text-2 {
      flex: 3;
      height: 35px;
      justify-content: flex-end;
      margin-right: 4px;
      padding: 2px 6px;
    }
  }
}

.popup-content {
  width: 100vw;
  height: 55vh;
  overflow-y: scroll;
}
.card-list-flexbox-popup {
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .card-list-item,
  .card-list-item-input {
    width: 100vw;
    height: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;

    uni-text {
      font-size: 14px;
      height: 50rpx;
      text-align: left;
      padding: 0 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    uni-image {
      width: calc(100vw / 2 - 4px);
      height: calc(100vw / 3.2 - 2px);
      pointer-events: none;
    }
    uni-image::after {
      content: '×';
      width: 22px;
      height: 22px;
      position: absolute;
      top: 5px;
      right: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.9);
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      font-size: 24px;
      pointer-events: auto;
    }

    .text-1 {
      flex: 1;
      height: 40px;
      justify-content: flex-start;
    }
    .text-2 {
      flex: 3;
      height: 40px;
      justify-content: flex-end;
      margin-right: 4px;
      padding: 2px 6px;
    }
    .text-3 {
      width: calc(100% - 15%);
      min-height: 35px;
      justify-content: flex-end;
      padding: 2px 6px;
    }
    .btn-mg {
      margin: 0 5px;
    }
  }
  .card-list-item {
    justify-content: center;
  }
  .card-list-item-input {
    margin: 10px 0 10px 2%;
    display: flex;
    flex-direction: column;

    uni-view {
      width: 100%;
      height: 100%;
      display: flex;

      uni-textarea {
        flex: 8;
      }
      uni-view {
        flex: 1;
      }

      .operation-icon,
      .operation-icon-2 {
        height: auto;
        uni-text {
          width: 22px;
          height: 100%;
          padding: 0 !important;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          color: white;
          background-color: #80b7ff;
        }
      }
      .operation-icon-2 {
        uni-text {
          background-color: #ff5962;
        }
      }
    }
  }

  .grid-image {
    display: grid;
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-template-columns: repeat(2, 1fr);
    padding: 0 4px;
  }

  .card-list-item:nth-of-type(1) {
    .text-1 {
      flex: 9;
      font-weight: bold;
      color: black !important;
    }
    .text-1::before {
      content: '';
      width: 4px;
      height: 20px;
      border-radius: 4px;
      margin-right: 4px;
      background-color: skyblue;
    }
    .text-2 {
      flex: 4;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      color: limegreen !important;
    }
  }
}

.custom-table {
  height: calc(100vh - 300px);
  margin: 5px 0;
  overflow-y: scroll;
}

.uni-list-cell {
  width: 100vw;
  height: 35px;
  margin: 4px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #eaeff2;
  background-color: #fff;

  view {
    font-size: 14px;
    height: 50rpx;
    text-align: left;
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .uni-list-cell-left {
    flex: 1;
    height: 35px;
    justify-content: flex-start;
  }
  .uni-list-cell-db {
    flex: 3;
    height: 35px;
    justify-content: flex-end;
    margin-right: 4px;
    padding: 2px 6px;

    uni-picker {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
}

.modal-btns {
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line {
  margin-top: 10rpx;
  height: 80rpx;
  width: 1rpx;
  background-color: #dcdcdc;
}
</style>