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

<template>
  <div class="dialog-edit-record-item">
    <el-dialog
      v-model="dialogVisible"
      width="1000px"
      :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="185px"
      >
        <div class="flex items-start form-box">
          <div class="flex-auto">
            <el-form-item
              label="Reference"
              prop="Reference"
            >
              <el-input
                v-model="form.Reference"
                placeholder=""
              />
            </el-form-item>

            <el-form-item
              label="Tracking Number"
              prop="Tracking_Number"
            >
              <el-input v-model="form.Tracking_Number" />
            </el-form-item>

            <el-form-item
              label="CBM Or Chargable Weight"
              prop="CBM_Or_Chargable_Weight"
            >
              <el-input v-model="form.CBM_Or_Chargable_Weight" />
            </el-form-item>
          </div>

          <div class="flex-auto">
            <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_name"
            >
              <el-select
                v-model="form.statement_name"
                style="width: 100%"
              >
                <el-option
                  v-for="(option, index) in statementList as IOptionItem[]"
                  :key="index"
                  :label="option.label"
                  :value="option.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="Payment Type"
              prop="payment_type"
            >
              <el-select
                v-model="form.payment_type"
                disabled
              >
                <el-option
                  v-for="option in paymentOption"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <br />
        <div class="flex justify-center">
          <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: '国际运费',
  },
]

const dialogVisible = ref(false)

const mainForm = ref<FormInstance>()
const form: any = ref({})
const formRule = ref<FormRules>({
  PO_Number: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  statement_name: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  Total: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  unit_price: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  Billable_Weight: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  Tracking_Number: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
  payment_type: {
    required: true,
    message: '必填项',
    trigger: 'blur',
  },
})
watchEffect(() => {
  dialogVisible.value = props.visible
  form.value = Object.assign(
    {
      currency: 'CNY',
      statement_name: '',
      payment_type: '国际运费',
    },
    JSON.parse(JSON.stringify(props.currentEditRow)),
  )

  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) {
  console.log('run', formEl)

  if (!formEl) return
  formEl.validate((valid, fields) => {
    console.log(valid)
    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>