feat: 新增客户拜访记录功能

yuan

6 天以前 0bdc9b5ebb72ef4a25379d261c211ff9c0ca9b13

 src/views/collaborativeApproval/customerVisit/index.vue

@@ -25,6 +25,9 @@
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openAddDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
@@ -124,13 +127,73 @@
        </div>
      </template>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      v-model="addVisible"
      title="新增客户拜访记录"
      width="600px"
      @close="closeAddDialog"
    >
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="100px">
        <el-form-item label="客户名称" prop="customerId">
          <el-select
            v-model="addForm.customerId"
            filterable
            placeholder="请选择客户"
            style="width: 100%"
            @change="handleCustomerChange"
          >
            <el-option
              v-for="item in customerOptions"
              :key="item.id"
              :label="item.customerName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="addForm.contact" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="addForm.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="拜访目的" prop="purposeVisit">
          <el-input v-model="addForm.purposeVisit" placeholder="请输入拜访目的" />
        </el-form-item>
        <el-form-item label="拜访时间" prop="purposeDate">
          <el-date-picker
            v-model="addForm.purposeDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择拜访时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="拜访地点" prop="visitAddress">
          <el-input v-model="addForm.visitAddress" placeholder="请输入拜访地点" />
        </el-form-item>
        <el-form-item label="拜访人" prop="visitingPeople">
          <el-input v-model="addForm.visitingPeople" placeholder="请输入拜访人" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="addSubmitting" @click="submitAdd">确认</el-button>
          <el-button @click="closeAddDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import pagination from '@/components/PIMTable/Pagination.vue'
import { getVisitRecords } from '@/api/collaborativeApproval/customerVisit.js'
import { getVisitRecords, addVisitRecord } from '@/api/collaborativeApproval/customerVisit.js'
import { getAllCustomerList } from '@/api/customerService/index.js'

const { proxy } = getCurrentInstance()
const tableData = ref([])
@@ -194,6 +257,106 @@
  detailForm.value = {}
}

// 新增相关
const addVisible = ref(false)
const addSubmitting = ref(false)
const addFormRef = ref(null)
const customerOptions = ref([])
const addForm = reactive({
  customerId: '',
  customerName: '',
  contact: '',
  contactPhone: '',
  purposeVisit: '',
  purposeDate: '',
  visitAddress: '',
  visitingPeople: '',
  remark: '',
})
const addRules = {
  customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
  purposeVisit: [{ required: true, message: '请输入拜访目的', trigger: 'blur' }],
  purposeDate: [{ required: true, message: '请选择拜访时间', trigger: 'change' }],
  visitingPeople: [{ required: true, message: '请输入拜访人', trigger: 'blur' }],
}

// 打开新增弹窗
const openAddDialog = () => {
  resetAddForm()
  addVisible.value = true
  // 懒加载客户下拉数据
  if (!customerOptions.value.length) {
    getCustomerOptions()
  }
}

// 获取客户下拉数据
const getCustomerOptions = () => {
  getAllCustomerList({ current: 1, size: 1000, total: 0 }).then((res) => {
    customerOptions.value = (res.data?.records || []).map((item) => ({
      id: item.id,
      customerName: item.customerName,
      contact: item.contactPerson,
      contactPhone: item.contactPhone,
      companyAddress: item.companyAddress,
    }))
  })
}

// 选择客户后带出联系人和联系电话
const handleCustomerChange = (customerId) => {
  const customer = customerOptions.value.find((item) => item.id === customerId)
  addForm.customerName = customer?.customerName || ''
  addForm.contact = customer?.contact || ''
  addForm.contactPhone = customer?.contactPhone || ''
  addForm.visitAddress = customer?.companyAddress || ''
}

// 重置新增表单
const resetAddForm = () => {
  Object.assign(addForm, {
    customerId: '',
    customerName: '',
    contact: '',
    contactPhone: '',
    purposeVisit: '',
    purposeDate: '',
    visitAddress: '',
    visitingPeople: '',
    remark: '',
  })
  addFormRef.value?.resetFields()
}

// 关闭新增弹窗
const closeAddDialog = () => {
  addVisible.value = false
  resetAddForm()
}

// 提交新增
const submitAdd = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return
    const { customerId, ...data } = addForm
    addSubmitting.value = true
    addVisitRecord(data)
      .then((res) => {
        addSubmitting.value = false
        if (res.code === 200) {
          proxy.$modal.msgSuccess('新增成功')
          closeAddDialog()
          handleQuery()
        } else {
          proxy.$modal.msgError(res.msg || '新增失败')
        }
      })
      .catch(() => {
        addSubmitting.value = false
      })
  })
}

onMounted(() => {
  getList()
})