feat: 资信管理-编辑&取消

@@ -104,6 +104,13 @@
                 "navigationBarTextStyle": "black"
                 "navigationBarTextStyle": "black"
             }
             }
         }, {
         }, {
+            "path": "pages/credit_manage/modify",
+            "style": {
+                "navigationBarTitleText": "编辑客户资信",
+                "navigationBarBackgroundColor": "#ffffff",
+                "navigationBarTextStyle": "black"
+            }
+        }, {
             "path": "pages/credit_manage/history_detail",
             "path": "pages/credit_manage/history_detail",
             "style": {
             "style": {
                 "navigationBarTitleText": "变更记录详情",
                 "navigationBarTitleText": "变更记录详情",

+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <uni-list>
+        <uni-list-item class="select-item" :class="form.serialNumber ? 'is-filled' : 'is-empty'">
+          <template v-slot:body>
+            <view class="item-title"><text class="required">*</text><text>编号</text></view>
+          </template>
+          <template v-slot:footer>
+            <view class="serial-number-row">
+              <uni-easyinput v-model="form.serialNumber" placeholder="自动生成编号" :inputBorder="false" disabled />
+            </view>
+          </template>
+        </uni-list-item>
+
+        <uni-list-item title="区域">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.region" placeholder="请输入区域" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="客户简称">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.customerShortName" placeholder="请输入客户简称" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+        <uni-list-item class="select-item" :class="form.enterpriseType ? 'is-filled' : 'is-empty'" clickable
+          @click="openSheet('enterpriseType')" :rightText="displayLabel('enterpriseTypeName')" showArrow>
+          <template v-slot:body>
+            <view class="item-title"><text>企业类型</text></view>
+          </template>
+        </uni-list-item>
+
+        <uni-list-item class="mgb10" title="登记日期">
+          <template v-slot:footer>
+            <uni-datetime-picker type="date" v-model="form.registerDate" />
+          </template>
+        </uni-list-item>
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>基础资料</span>
+        </view>
+
+        <uni-list-item class="select-item" :class="form.companyId ? 'is-filled' : 'is-empty'" clickable
+          @click="openRelate('companyId')" :rightText="form.companyIdName || '请选择单位名称'" showArrow>
+          <template v-slot:body>
+            <view class="item-title"><text class="required">*</text><text>单位名称</text></view>
+          </template>
+        </uni-list-item>
+
+        <uni-list-item title="企业性质">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.companyNature" placeholder="请输入企业性质" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="单位地址">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.companyAddress" placeholder="请输入单位地址" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="amount-item">
+          <template v-slot:body>
+            <view class="item-title"><text>注册资本</text></view>
+          </template>
+          <template v-slot:footer>
+            <view class="amount-row">
+              <uni-easyinput type="number" v-model="form.registeredCapital" placeholder="0.00" :inputBorder="false" />
+              <text class="unit">万元</text>
+            </view>
+          </template>
+        </uni-list-item>
+        <uni-list-item title="账号">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.bankAccount" placeholder="请输入账号" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="账开户行">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.bankName" placeholder="请输入账开户行" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="税号">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.taxNumber" placeholder="请输入税号" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="注册时间">
+          <template v-slot:footer>
+            <uni-datetime-picker type="date" v-model="form.registrationTime" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="经营年限">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.businessYears" placeholder="请输入经营年限" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="mgb10" title="经营范围">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.businessScope" placeholder="请输入经营范围" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+        <CorePersonnel mode="add" :list="initCorePersonnelList" @change="onCorePersonnelChange"
+          :options="genderOptions" />
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>资产经营情况</span>
+        </view>
+
+        <uni-list-item title="经营场地属性">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.businessProperty" placeholder="请输入经营场地属性" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="amount-item">
+          <template v-slot:body>
+            <view class="item-title"><text>占地面积</text></view>
+          </template>
+          <template v-slot:footer>
+            <view class="amount-row">
+              <uni-easyinput type="number" v-model="form.landArea" placeholder="0.00" :inputBorder="false" />
+              <text class="unit">平方米</text>
+            </view>
+          </template>
+        </uni-list-item>
+        <uni-list-item title="仓储条件">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.storageConditions" placeholder="请输入仓储条件" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="员工人数">
+          <template v-slot:footer>
+            <uni-easyinput type="number" v-model="form.employeeCount" placeholder="请输入员工人数" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="设备属性">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.equipmentAttributes" placeholder="请输入设备属性" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="资产评估">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.assetEvaluation" placeholder="请输入资产评估" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="上年度销售额">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.lastYearSales" placeholder="请输入上年度销售额" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="月均销量">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.monthlyAvgSales" placeholder="请输入月均销量" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="销项发票所开品名与计量单位">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.invoiceItemUnit" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="认证证书">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.certificationCertificate" placeholder="请输入认证证书" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="我司售于产品与经营范围是否匹配">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.productMatch" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="主要客户">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.majorCustomers" placeholder="请输入主要客户" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="主营项目">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.mainProjects" placeholder="请输入主营项目" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="从事行业">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.industryInvolved" placeholder="请输入从事行业" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="在该行业中的经验">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.industryExperience" placeholder="请输入行业经验" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="mgb10" title="是否与其他企业有经济纠纷 违规信息 拖欠员工薪资">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.hasDispute" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>与我司合作</span>
+        </view>
+
+        <uni-list-item title="与我司合作时间">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.cooperationStartDate" placeholder="请输入与我司合作时间" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="月均操作量">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.monthlyAvgVolume" placeholder="请输入月均操作量" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="是否口头协议操作">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.isVerbalAgreement" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="是否签订其他协议(列举)">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.otherAgreements" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="与我司操作是否签订长年合同">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.hasLongTermContract" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="合同类型">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.contractType" placeholder="请输入合同类型" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="mgb10" title="是否有过中断及中断原因">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.hasInterruption" placeholder="请输入" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>办事处意见</span>
+        </view>
+        <uni-list-item class="select-item" :class="form.suggestedCategory ? 'is-filled' : 'is-empty'" clickable
+          @click="openSheet('suggestedCategory')" :rightText="displayLabel('suggestedCategoryName')" showArrow>
+          <template v-slot:body>
+            <view class="item-title"><text>建议客户分类</text></view>
+          </template>
+        </uni-list-item>
+        <uni-list-item class="amount-item">
+          <template v-slot:body>
+            <view class="item-title"><text>授信额度</text></view>
+          </template>
+          <template v-slot:footer>
+            <view class="amount-row">
+              <uni-easyinput type="number" v-model="form.creditLimit" placeholder="0.00" :inputBorder="false" />
+              <text class="unit">万元</text>
+            </view>
+          </template>
+        </uni-list-item>
+        <uni-list-item title="结算期限">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.settlementPeriod" placeholder="请输入结算期限" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="加工操作方案">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.materialSupplyPlan" placeholder="请输入加工操作方案" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item class="mgb10 select-item" :class="form.investigatorName ? 'is-filled' : 'is-empty'" clickable
+          @click="openSheet('investigator')" :rightText="form.investigatorName || '请选择调查人'" showArrow>
+          <template v-slot:body>
+            <view class="item-title"><text>调查人</text></view>
+          </template>
+        </uni-list-item>
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>职能核对</span>
+        </view>
+
+        <uni-list-item title="年度总销量">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.annualTotalSales" placeholder="请输入年度总销量" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="主要行业">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.mainIndustry" placeholder="请输入主要行业" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="年度款料概况">
+          <template v-slot:footer>
+            <uni-easyinput v-model="form.annualMaterialOverview" placeholder="请输入年度款料概况" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+      </uni-list>
+    </scroll-view>
+    <view class="footer">
+      <button class="btn submit" type="primary" @click="onSubmit">提交</button>
+    </view>
+
+    <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
+      @confirm="onSheetConfirm" />
+    <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
+      :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
+      :selectedKeys.sync="relate.selectedKeys" @confirm="onRelateConfirm" />
+  </view>
+
+</template>
+
+<script>
+import SingleSelectSheet from '@/components/single-select/index.vue'
+import RelateSelectSheet from '@/components/relate-select/index.vue'
+import { getDetailApi, updateApi, getAllUser } from '@/api/credit_manage.js'
+import { getDicByCodeApi } from '@/api/base.js'
+import CorePersonnel from './corePersonnel.vue'
+
+export default {
+  name: 'CreditManageModify',
+  components: { SingleSelectSheet, RelateSelectSheet, CorePersonnel },
+  data() {
+    return {
+      id: '',
+      form: {
+        id: '',
+        serialNumber: '',
+        region: '',
+        customerShortName: '',
+        enterpriseType: '',
+        enterpriseTypeName: '',
+        registerDate: '',
+        companyId: '',
+        companyIdName: '',
+        companyNature: '',
+        companyAddress: '',
+        registeredCapital: '',
+        bankAccount: '',
+        bankName: '',
+        taxNumber: '',
+        registrationTime: '',
+        businessYears: '',
+        businessScope: '',
+        businessProperty: '',
+        landArea: '',
+        storageConditions: '',
+        employeeCount: '',
+        equipmentAttributes: '',
+        assetEvaluation: '',
+        lastYearSales: '',
+        monthlyAvgSales: '',
+        invoiceItemUnit: '',
+        certificationCertificate: '',
+        productMatch: '',
+        majorCustomers: '',
+        mainProjects: '',
+        industryInvolved: '',
+        industryExperience: '',
+        hasDispute: '',
+        cooperationStartDate: '',
+        monthlyAvgVolume: '',
+        isVerbalAgreement: '',
+        otherAgreements: '',
+        hasLongTermContract: '',
+        contractType: '',
+        hasInterruption: '',
+        settlementPeriod: '',
+        materialSupplyPlan: '',
+        suggestedCategory: '',
+        suggestedCategoryName: '',
+        creditLimit: '',
+        investigator: '',
+        investigatorName: '',
+        annualTotalSales: '',
+        mainIndustry: '',
+        annualMaterialOverview: '',
+        companyCreditLimit: '',
+        corePersonnelList: [],
+      },
+      initCorePersonnelList: [],
+      sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
+      relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' },
+      enterpriseTypeOptions: [],
+      categoryOptions: [],
+      investigatorOptions: [],
+      genderOptions: []
+    }
+  },
+  onLoad(query) {
+    this.id = query && query.id || ''
+    if (this.id) this.loadDetail(this.id)
+  },
+  created() {
+    this.loadEnterpriseTypeOptions()
+    this.loadCategoryOptions()
+    this.loadInvestigatorOptions()
+    this.loadGenderOptions()
+  },
+  watch: {
+    enterpriseTypeOptions() { this.refreshLabelFields() },
+    categoryOptions() { this.refreshLabelFields() },
+    investigatorOptions() { this.refreshLabelFields() }
+  },
+  methods: {
+    async loadDetail(id) {
+      try {
+        const res = await getDetailApi(id)
+        const m = res.data || {}
+        const next = { ...this.form, ...m }
+        next.id = m.id || m.code || id
+        next.companyId = m.companyId || (m.company && m.company.id) || next.companyId
+        next.companyIdName = m.companyName || (m.company && m.company.name) || next.companyIdName
+        next.investigator = m.investigator || m.investigatorId || next.investigator
+        next.investigatorName = m.investigatorName || next.investigatorName
+        next.corePersonnelList = Array.isArray(m.corePersonnelList) ? m.corePersonnelList : []
+        this.form = next;
+        this.initCorePersonnelList = next.corePersonnelList || [];
+        this.$nextTick(() => this.refreshLabelFields())
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      }
+    },
+    displayLabel(field) {
+      const m = this.form
+      const map = {
+        enterpriseTypeName: '请选择企业类型',
+        suggestedCategoryName: '请选择建议客户分类',
+      }
+      const val = m[field]
+      return val ? String(val) : map[field]
+    },
+    refreshLabelFields() {
+      const et = this.enterpriseTypeOptions.find(o => String(o.value) === String(this.form.enterpriseType))
+      const ct = this.categoryOptions.find(o => String(o.value) === String(this.form.suggestedCategory))
+      const iu = this.investigatorOptions.find(o => String(o.value) === String(this.form.investigator))
+      this.form.enterpriseTypeName = et ? (et.label || '') : this.form.enterpriseTypeName
+      this.form.suggestedCategoryName = ct ? (ct.label || '') : this.form.suggestedCategoryName
+      this.form.investigatorName = iu ? (iu.label || '') : this.form.investigatorName
+    },
+    async openSheet(field) {
+      const setSheet = (title, options) => {
+        const current = this.form[field]
+        const match = (options || []).find(o => String(o.label) === String(current) || String(o.value) === String(current))
+        this.sheet = { ...this.sheet, visible: true, title, options, field, value: match ? match.value : '' }
+      }
+      if (field === 'enterpriseType') {
+        setSheet('企业类型', this.enterpriseTypeOptions)
+      } else if (field === 'suggestedCategory') {
+        setSheet('建议客户分类', this.categoryOptions)
+      } else if (field === 'investigator') {
+        setSheet('调查人', this.investigatorOptions)
+      }
+    },
+    onSheetConfirm({ value, label }) {
+      const field = this.sheet.field
+      if (!field) return
+      this.form[field] = value || ''
+      this.form[field + 'Name'] = label || ''
+      this.sheet.visible = false
+    },
+    openRelate(fieldKey) {
+      let config = {}
+      if (fieldKey === 'companyId') {
+        config = {
+          title: '单位名称',
+          source: 'customer',
+          rowKey: 'id',
+          multiple: false,
+          display: [
+            { label: '姓名', field: 'name' },
+            { label: '编号', field: 'code' },
+            { label: '状态', field: 'available', format: v => (v ? '启用' : '停用') }
+          ]
+        }
+      }
+      const selectedKeys = this.form[fieldKey] ? [this.form[fieldKey]] : []
+      this.sheet.visible = false
+      this.relate.title = config.title
+      this.relate.source = config.source
+      this.relate.display = config.display
+      this.relate.multiple = config.multiple
+      this.relate.rowKey = config.rowKey
+      this.relate.selectedKeys = selectedKeys
+      this.relate.fieldKey = fieldKey
+      this.$nextTick(() => { this.relate.visible = true })
+    },
+    onRelateConfirm({ items }) {
+      const _fieldKey = this.relate.fieldKey
+      const first = (items && items.length > 0) ? items[0] : null
+      this.form[_fieldKey] = (first && (first.id || first.code)) || ''
+      this.form[_fieldKey + 'Name'] = (first && (first.name || first.text)) || ''
+    },
+    validateRequired() {
+      const checks = [
+        { key: 'serialNumber', label: '编号' },
+        { key: 'companyId', label: '单位名称' }
+      ]
+      for (const it of checks) {
+        const val = this.form[it.key]
+        if (val === undefined || val === null || String(val).trim() === '') {
+          uni.showToast({ title: `请先选择${it.label}`, icon: 'none' })
+          return false
+        }
+      }
+      return true
+    },
+    async loadEnterpriseTypeOptions() {
+      try {
+        const res = await getDicByCodeApi('ENTERPRISE_TYPE')
+        const list = res.data || []
+        this.enterpriseTypeOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
+      } catch (e) {
+        this.enterpriseTypeOptions = []
+      }
+    },
+    async loadCategoryOptions() {
+      try {
+        const res = await getDicByCodeApi('CUSTOMER_CATEGORY')
+        const list = res.data || []
+        this.categoryOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
+      } catch (e) {
+        this.categoryOptions = []
+      }
+    },
+    async loadInvestigatorOptions() {
+      try {
+        const res = await getAllUser()
+        const list = res.data || []
+        this.investigatorOptions = (list || []).map(it => ({ label: it.name || it.userName || '', value: it.id || it.userId || '' }))
+      } catch (e) {
+        this.investigatorOptions = []
+      }
+    },
+    async loadGenderOptions() {
+      try {
+        const res = await getDicByCodeApi('GENDER_TYPE')
+        const list = res.data || []
+        this.genderOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
+      } catch (e) {
+        this.genderOptions = []
+      }
+    },
+    onCorePersonnelChange(data) {
+      // const list = Array.isArray(data) ? data : []
+      // this.form.corePersonnelList = list
+    },
+    async onSubmit() {
+      if (!this.validateRequired()) return
+      const payload = {
+        ...this.form,
+        status: 'UPDATE'
+      }
+      payload.corePersonnelList.forEach(it => {
+        delete it.collapsed
+        delete it.sexName
+      })
+      delete payload.enterpriseTypeName
+      delete payload.suggestedCategoryName
+      delete payload.companyIdName
+      delete payload.investigatorName
+      try {
+        await updateApi(payload)
+        uni.showToast({ title: '保存成功', icon: 'success' })
+        setTimeout(() => {
+          uni.redirectTo({ url: '/pages/credit_manage/index' })
+        }, 300)
+      } catch (e) {
+        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scroll {
+  flex: 1;
+  padding: 12rpx 0 160rpx;
+}
+
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
+
+  .btn {
+    height: 80rpx;
+    line-height: 80rpx;
+    border-radius: 12rpx;
+    font-size: 32rpx;
+  }
+
+  .submit {
+    background: $theme-primary;
+    color: #fff;
+  }
+}
+
+::v-deep .uni-list {
+  background: transparent;
+
+  &-item {
+    &__extra-text {
+      font-size: 32rpx;
+    }
+
+    &__content-title {
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    &__container {
+      padding: 32rpx;
+      align-items: center;
+
+      .uni-easyinput {
+
+        .is-disabled {
+          background-color: transparent !important;
+        }
+
+        &__placeholder-class {
+          font-size: 32rpx;
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        &__content {
+          border: none;
+
+          &-input {
+            padding-left: 0 !important;
+            height: 48rpx;
+            line-height: 48rpx;
+            font-size: 32rpx;
+          }
+
+          .content-clear-icon {
+            font-size: 44rpx !important;
+          }
+        }
+      }
+
+      .amount-row {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .uni-easyinput {
+          flex: 1;
+        }
+
+        .unit {
+          margin-left: 16rpx;
+          color: rgba(0, 0, 0, 0.9);
+        }
+      }
+
+      .item-title,
+      .uni-list-item__content {
+        flex: none;
+        min-height: 48rpx;
+        line-height: 48rpx;
+        font-size: 32rpx;
+        position: relative;
+        width: 162rpx;
+        margin-right: 32rpx;
+        color: rgba(0, 0, 0, 0.9);
+        padding-right: 0;
+
+
+        .required {
+          color: red;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: -16rpx;
+        }
+      }
+
+    }
+
+    &.select-item {
+      &.is-empty {
+        .uni-list-item__extra-text {
+          color: rgba(0, 0, 0, 0.4) !important;
+        }
+      }
+
+      &.is-filled {
+        .uni-list-item__extra-text {
+          color: rgba(0, 0, 0, 0.9) !important;
+        }
+      }
+
+      .serial-number-row {
+        display: flex;
+        align-items: center;
+      }
+
+    }
+
+    &.mgb10 {
+      margin-bottom: 20rpx;
+    }
+
+  }
+
+  .title-header {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 32rpx 32rpx 22rpx;
+
+    &_icon {
+      width: 32rpx;
+      height: 28rpx;
+      margin-right: 16rpx;
+    }
+
+    span {
+      color: rgba(0, 0, 0, 0.9);
+      font-size: 32rpx;
+      line-height: 44rpx;
+      font-weight: 600;
+    }
+  }
+}
+</style>