crm_extend/src/pages/payment-record/components/edit.vue

<template>
  <div class="dialog-edit-record-item">
    <el-dialog
      v-model="dialogVisible"
      width="800px"
      :title="editMode === 1 ? 'New line' : 'Edit'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <el-form
        ref="mainForm"
        :rules="formRule"
        :model="form"
        label-width="140px"
      >
        <div class="flex start form-box">
          <div class="flex-auto">
            <el-form-item
              label="PO Number"
              prop="po_number"
            >
              <el-input
                v-model="form.po_number"
                placeholder="eg: POXXXX"
                @change="(v) => (form.po_number = v.toUpperCase())"
              />
            </el-form-item>
            <el-form-item
              label="SKU"
              prop="sku"
            >
              <el-input v-model="form.sku" />
            </el-form-item>

            <el-form-item
              label="Unit Price"
              prop="unit_price"
            >
              <el-input
                v-model="form.unit_price"
                type="number"
                min="0"
              />
            </el-form-item>

            <el-form-item
              label="Sample Fee"
              prop="sample_fee"
            >
              <el-input
                v-model="form.sample_fee"
                type="number"
                min="1"
              />
            </el-form-item>

            <el-form-item
              label="Quantity"
              prop="quantity"
            >
              <el-input
                v-model="form.quantity"
                type="number"
                min="1"
              />
            </el-form-item>

            <el-form-item
              label="Total"
              prop="total"
            >
              <el-input
                v-model="form.total"
                type="number"
                min="0"
              />
            </el-form-item>
          </div>

          <div class="flex-auto">
            <!-- <el-form-item
              label="PO ID"
              prop="po_id"
            >
              <el-input
                v-model="form.po_id"
                placeholder="eg: 4791186000111831822"
              />
            </el-form-item> -->
            <el-form-item
              label="Currency"
              prop="currency"
            >
              <el-select
                v-model="form.currency"
                :disabled="disableFlag"
                style="width: 100%"
              >
                <el-option
                  v-for="option in currencyList as IOptionItem[]"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="Statement Name"
              prop="statement"
            >
              <el-select
                v-model="form.statement"
                style="width: 100%"
                @change="
                  (v) => {
                    form.statement_id = v.value
                    form.statement_name = v.label
                  }
                "
              >
                <el-option
                  v-for="option in statementList as IOptionItem[]"
                  :key="option.value"
                  :label="option.label"
                  :value="option"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="Setup Service Fee"
              prop="setup_service_fee"
            >
              <el-input
                v-model="form.setup_service_fee"
                type="number"
              />
            </el-form-item>

            <el-form-item label="Payment Type">
              <el-select v-model="form.payment_type">
                <el-option
                  v-for="option in paymentOption"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Description">
              <el-input
                v-model="form.description"
                type="textarea"
                rows="3"
              />
            </el-form-item>
          </div>
        </div>

        <br />
        <div class="flex end">
          <el-button
            type="primary"
            @click="save(mainForm)"
          >
            Save
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'EditIPoItem',
})
</script>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import {
  ElMessage,
  ElDialog,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElInput,
  ElButton,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {
  // IPoItem,
  IOptionItem,
} from '../inteface'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  disableFlag: {
    type: Boolean,
    default: false,
  },
  lockedCurrency: {
    type: String,
    default: '',
  },
  currentEditRow: {
    type: Object,
    default: () => {
      return {}
    },
  },
  currencyList: {
    type: Array,
    default: () => {
      return []
    },
  },
  statementList: {
    type: Array,
    default: () => {
      return [] as string[]
    },
  },
  editMode: {
    type: Number,
    default: 1,
  },
})

const paymentOption = [
  {
    label: '货款',
    value: '货款',
  },
  {
    label: '快递款',
    value: '快递款',
  },
]

const dialogVisible = ref(false)

const mainForm = ref<FormInstance>()
const form: any = ref({})
const formRule = ref<FormRules>({
  po_number: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  // sku: {
  //   required: true,
  //   message: '必填项',
  //   trigger: 'blur',
  // },
  statement: {
    required: true,
    trigger: 'change',
    asyncValidator: (rule, v) => {
      return new Promise((resolve, reject) => {
        if (v.value && v.label) {
          resolve()
        } else {
          reject('必填项')
        }
      })
    },
  },
  total: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  unit_price: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  quantity: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  sample_fee: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  setup_service_fee: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  payment_type: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
})
watchEffect(() => {
  dialogVisible.value = props.visible
  form.value = Object.assign(
    {
      po_number: '',
      // po_id: '',
      unit_price: '',
      quantity: '',
      sample_fee: '',
      setup_service_fee: '',
      total: '',
      currency: 'CNY',
      statement: {}, // 混入了特殊字段, 下拉选项需要同时变更两个字段, 不这样做不出效果
      statement_name: '',
      statement_id: '',
      description: '',
      payment_type: '货款',
    },
    JSON.parse(JSON.stringify(props.currentEditRow)),
  )
  form.value.statement = {
    label: form.value.statement_name,
    value: form.value.statement_id,
  }
  if (props.disableFlag) {
    form.value.currency = props.lockedCurrency
  }
})

const emit = defineEmits(['update:visible', 'edit', 'add'])

const handleClose = function (done: any) {
  emit('update:visible', false)

  if (typeof done === 'function') {
    done()
  }
}
const save = function (formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      if (props.editMode === 1) {
        emit('add', form.value)
      } else if (props.editMode === 2) {
        emit('edit', form.value)
      }
    } else {
      console.log('check form has not pass!', fields)
      ElMessage.error('请检查表单必填项')
    }
  })
}
</script>

<style lang="scss">
.dialog-edit-record-item {
  input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
    &:hover {
      -moz-appearance: textfield;
      appearance: textfield;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.form-box {
  .flex-auto {
    &:first-of-type {
      padding-right: 12px;
    }
    & + .flex-auto {
      padding-left: 12px;
    }
  }
}
</style>