1

src/assets/stylus/index.styl

@@ -50,6 +50,19 @@
   padding 0 12px 0 0 !important;
 }
 
+
+.el-form-item.is-required .el-form-item__label {
+  padding 0 12px !important;
+}
+
+.el-form-item.is-required ~ .el-form-item:not(.is-required) .el-form-item__label {
+  padding 0 12px !important;
+}
+
+.el-form-item:has(+ .el-form-item.is-required):not(.is-required) .el-form-item__label {
+  padding 0 12px !important;
+}
+
 .el-form-item.is-error {
   .a-uploader {
     .el-upload {

src/common/utils/v-model.ts

@@ -0,0 +1,26 @@
+type EventT<T> = {
+  // @ts-ignore
+  [key in `update:${keyof T}`]: 1
+}
+export default function <T extends { [key: string]: any }>(props: T, propName: keyof T, emits: (event: keyof EventT<T>, ...args: any[]) => void) {
+  return computed({
+    get() {
+      return new Proxy(props[propName], {
+        get(target, key) {
+          return Reflect.get(target, key)
+        },
+        set(target, key, value) {
+          Reflect.set(target, key, value)
+          emits(('update:' + (propName as string)) as keyof EventT<T>, {
+            ...target,
+            [key]: value,
+          })
+          return true
+        },
+      })
+    },
+    set(val) {
+      emits(('update:' + (propName as string)) as keyof EventT<T>, val)
+    },
+  })
+}

src/components/a-form-panel/AFormPanel.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     doSubmit: (data: T) => Promise<boolean | void>
     rules?: Partial<Record<string, Arrayable<FormItemRule>>>
     labelWidth?: string
+    width?: string
   }>(),
   {
     rules: () => ({} as Partial<Record<string, Arrayable<FormItemRule>>>),
@@ -69,6 +70,7 @@ defineExpose({
     :closed="dialogCloseHandler"
     :submit-handler="submitHandler"
     :title="title"
+    :width="width"
   >
     <ElForm
       ref="formRef"

src/components/uploader/Uploader.vue

@@ -14,12 +14,16 @@ import type { UploadProps } from 'element-plus/es/components/upload/src/upload'
 const props = withDefaults(defineProps<{
   files?: string[]
   file?: string
+  height?: string
+  width?: string
   limit?: number
   uploadProps?: Partial<Omit<UploadProps, 'httpRequest' | 'crossorigin' | 'multiple'
     | 'data' | 'action' | 'headers' | 'limit' | 'onError'
     | 'onRemove' | 'onSuccess' | 'onPreview' | 'fileList' | 'beforeUpload' | 'beforeRemove' | 'onChange' | 'onProgress' | 'name' | 'drag'>>
 }>(), {
   limit: 1,
+  height: '100px',
+  width: '100px',
   // @ts-ignore
   uploadProps: {
     // @ts-ignore
@@ -129,11 +133,13 @@ defineExpose({
 
 <style lang="stylus" scoped>
 .a-uploader {
-  width: 148px;
+  width: v-bind(height);
-  height: 148px;
+  height: v-bind(width);
 
   :deep(.el-upload) {
     background-color white
+    width: 100%;
+    height: 100%;
 
     &.el-upload--text,
     &.el-upload--picture,
@@ -162,9 +168,33 @@ defineExpose({
 
   :deep(.el-upload-list) {
     margin 0
+    width: 100%;
+    height: 100%;
 
     .el-upload-list__item.is-success {
       margin 0
+      width: 100%;
+      height: 100%;
+    }
+
+    .el-upload-list__item.is-uploading {
+      margin 0
+      width: 100%;
+      height: 100%;
+
+      .el-progress {
+        width 100%
+        height 100%;
+
+        .el-progress-circle {
+          width 100% !important
+          height 100% !important
+        }
+
+        .el-progress__text {
+          width 100% !important
+        }
+      }
     }
   }
 

src/dts/components.d.ts

@@ -42,6 +42,8 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -93,6 +95,8 @@ declare global {
   const ElOption: typeof import('element-plus/es')['ElOption']
   const ElPagination: typeof import('element-plus/es')['ElPagination']
   const ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+  const ElRadio: typeof import('element-plus/es')['ElRadio']
+  const ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
   const ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
   const ElSelect: typeof import('element-plus/es')['ElSelect']
   const ElSwitch: typeof import('element-plus/es')['ElSwitch']

src/pages/gds/goods/ExpenseConfig.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import {
+  expenseStrategy,
+  unit,
+} from '@/pages/gds/goods/constants.ts'
+import VModel from '@/common/utils/v-model.ts'
+
+const props = defineProps<{
+  modelValue: {
+    // 计费策略
+    expenseStrategy?: string
+    // 计量单位
+    unit?: string
+    // 税率
+    taxRate?: number
+    // 单价
+    unitPrice?: number
+    // 起步价
+    initialPrice?: number
+    // 起步量
+    initialQuantity?: number
+    // 每档的量
+    everyQuantity?: number
+  }
+}>()
+const emits = defineEmits([ 'update:modelValue' ])
+
+const modelValueProxy = VModel<Pick<typeof props, 'modelValue'>>(props, 'modelValue', emits)
+
+
+/*
+ watch(
+ () => props.modelValue.expenseStrategy,
+ (n) => {
+ switch (n) {
+ case expenseStrategy.DanJia:
+ rulesProxy.value?.unitPrice =
+ break
+
+ case expenseStrategy.GuDing:
+ break
+
+ case expenseStrategy.TanXing:
+ break
+ }
+ },
+ )
+ */
+
+
+</script>
+
+<template>
+  <ElFormItem label="计费策略" prop="expenseStrategy">
+    <ElRadioGroup v-model="modelValueProxy.expenseStrategy">
+      <ElRadio v-for="it in expenseStrategy" :key="'expenseStrategy'+it.val" :value="it.val" border>{{ it.txt }}</ElRadio>
+    </ElRadioGroup>
+  </ElFormItem>
+  <ElFormItem label="计量单位" prop="unit">
+    <ElSelect v-model="modelValueProxy.unit">
+      <ElOption
+        v-for="item in unit"
+        :key="'unit'+item.val"
+        :label="item.txt"
+        :value="item.val"/>
+    </ElSelect>
+  </ElFormItem>
+  <ElFormItem label="税率" prop="taxRate">
+    <ElInputNumber v-model="modelValueProxy.taxRate" :max="100" :min="0" :precision="2" :step="0.01" controls-position="right"/>
+  </ElFormItem>
+  <ElFormItem v-if="modelValueProxy.expenseStrategy === expenseStrategy.TanXing" label="起步价" prop="initialPrice">
+    <ElInputNumber v-model="modelValueProxy.initialPrice" :min="0" :precision="2" :step="1" controls-position="right"/>
+  </ElFormItem>
+  <ElFormItem v-if="modelValueProxy.expenseStrategy === expenseStrategy.TanXing" label="起步量" prop="initialQuantity">
+    <ElInputNumber v-model="modelValueProxy.initialQuantity" :min="0" :step="1" controls-position="right"/>
+  </ElFormItem>
+  <ElFormItem
+    v-if="modelValueProxy.expenseStrategy !== expenseStrategy.MianFei"
+    :label="modelValueProxy.expenseStrategy === expenseStrategy.TanXing?'每档单价':(modelValueProxy.expenseStrategy === expenseStrategy.DanJia?'单价':'价格')"
+    prop="unitPrice">
+    <ElInputNumber v-model="modelValueProxy.unitPrice" :min="0" :precision="2" :step="1" controls-position="right"/>
+  </ElFormItem>
+  <ElFormItem v-if="modelValueProxy.expenseStrategy === expenseStrategy.TanXing" label="每档的量" prop="everyQuantity">
+    <ElInputNumber v-model="modelValueProxy.everyQuantity" :min="0" :step="1" controls-position="right"/>
+  </ElFormItem>
+</template>
+
+<style lang="stylus" scoped>
+
+</style>

src/pages/gds/goods/GoodsForm.vue

@@ -4,6 +4,7 @@
     :title="status === 'add' ? '新建产品' : '修改产品'"
     :details-loader="detailsLoader"
     :do-submit="doSubmit"
+    label-width="90px"
     :rules="rules"
   >
     <template #default="{formData}">
@@ -25,11 +26,41 @@
         <ElFormItem label="规格" prop="specParams">
           <ElInput v-model="formData.specParams" placeholder="规格"/>
         </ElFormItem>
-        <ElFormItem label="排序" prop="sort">
+
-          <ElInputNumber v-model="formData.sort" placeholder="请输入排序"/>
+        <ElFormItem label="计费策略" prop="expenseStrategy">
+          <ElRadioGroup v-model="formData.expenseStrategy">
+            <ElRadio v-for="it in expenseStrategy" :key="'expenseStrategy'+it.val" :value="it.val" border>{{ it.txt }}</ElRadio>
+          </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="计量单位" prop="unit">
-          <ADict v-model="formData.unit" dict-key="unit" placeholder="计量单位"/>
+          <ElSelect v-model="formData.unit">
+            <ElOption
+              v-for="item in unit"
+              :key="'unit'+item.val"
+              :label="item.txt"
+              :value="item.val"/>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="税率" prop="taxRate">
+          <ElInputNumber v-model="formData.taxRate" :max="100" :min="0" :precision="2" :step="0.01" controls-position="right"/>
+        </ElFormItem>
+        <ElFormItem v-if="formData.expenseStrategy === expenseStrategy.TanXing" label="起步价" prop="initialPrice">
+          <ElInputNumber v-model="formData.initialPrice" :min="0" :precision="2" :step="1" controls-position="right"/>
+        </ElFormItem>
+        <ElFormItem v-if="formData.expenseStrategy === expenseStrategy.TanXing" label="起步量" prop="initialQuantity">
+          <ElInputNumber v-model="formData.initialQuantity" :min="0" :step="1" controls-position="right"/>
+        </ElFormItem>
+        <ElFormItem
+          v-if="formData.expenseStrategy !== expenseStrategy.MianFei"
+          :label="formData.expenseStrategy === expenseStrategy.TanXing?'每档单价':(formData.expenseStrategy === expenseStrategy.DanJia?'单价':'价格')"
+          prop="unitPrice">
+          <ElInputNumber v-model="formData.unitPrice" :min="0" :precision="2" :step="1" controls-position="right"/>
+        </ElFormItem>
+        <ElFormItem v-if="formData.expenseStrategy === expenseStrategy.TanXing" label="每档的量" prop="everyQuantity">
+          <ElInputNumber v-model="formData.everyQuantity" :min="0" :step="1" controls-position="right"/>
+        </ElFormItem>
+        <ElFormItem label="排序" prop="sort">
+          <ElInputNumber v-model="formData.sort" controls-position="right" placeholder="请输入排序"/>
         </ElFormItem>
         <ElFormItem label="是否可用" prop="canuse">
           <el-switch v-model="formData.canuse"/>
@@ -47,10 +78,13 @@ import GoodsApi from '@/pages/gds/goods/goods-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import Uploader from '@/components/uploader/Uploader.vue'
-import ADict from '@/components/a-dict/ADict.vue'
 import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
 import GoodsCategoryDropTable from '@/pages/gds/goods-category/GoodsCategoryDropTable.vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
+import {
+  expenseStrategy,
+  unit,
+} from '@/pages/gds/goods/constants.ts'
 
 const props = withDefaults(defineProps<{
   research?: () => void

src/pages/gds/goods/constants.ts

@@ -0,0 +1,43 @@
+import { createEnum } from '@/common/utils/enums.ts'
+
+const expenseStrategyList = [
+  {
+    val: 'MianFei',
+    txt: '免费',
+  },
+  {
+    val: 'DanJia',
+    txt: '单价',
+  },
+  {
+    val: 'GuDing',
+    txt: '固定',
+  },
+  {
+    val: 'TanXing',
+    txt: '弹性',
+  },
+] as const
+
+export const expenseStrategy = createEnum(expenseStrategyList)
+
+const unitList = [
+  {
+    val: 'Dun',
+    txt: '吨',
+  },
+  {
+    val: 'Che',
+    txt: '车',
+  },
+  {
+    val: 'Fang',
+    txt: '方',
+  },
+  {
+    val: 'GongLi',
+    txt: '公里',
+  },
+] as const
+
+export const unit = createEnum(unitList)