ss-crm-manage-web/src/views/Clue/Pool/Comp/DialogSuccess.vue

<template>
  <Dialog title="成交登记" v-model="show" width="800px">
    <Descriptions :data="info" :schema="showSchema" :columns="2" />
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" class="mt-20px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="成交日期">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="选择日期时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="是否全款">
            <el-radio-group v-model="form.isFull">
              <el-radio :label="1"> 全款 </el-radio>
              <el-radio :label="2"> 非全款 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="支付金额">
            <el-input-number v-model="form.pay" :min="1" :step="1" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="备注">
            <Editor v-model:modelValue="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup name="DialogSuccess">
import * as ClueApi from '@/api/clue'
import { formatDate } from '@/utils/formatTime'

const show = ref(false)
const form = ref({})
const rules = ref({})
const info = ref({})

const props = defineProps({
  schema: {
    type: Array
  }
})

const showSchema = computed(() => {
  const arr = [
    {
      field: 'requirement',
      label: '诉求',
      span: 2
    },
    {
      field: 'remark',
      label: '备注',
      isEditor: true,
      span: 2
    }
  ]
  return [...props.schema, ...arr]
})

async function open(id) {
  try {
    resetForm(id)
    const data = await ClueApi.getClue(id)
    info.value = { ...data, ...data.diyParams }
    show.value = true
  } catch (error) {
    console.log(error)
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

function resetForm(id) {
  form.value = {
    clueId: id,
    dealDate: formatDate(new Date()),
    state: true,
    payPrice: 0,
    remark: undefined
  }
}

function handleSave() {
  console.log('保存成功')
}
</script>

<style lang="scss" scoped></style>