feat: 现场需求前端改动

tuqin

2026-09-24 409a6c46741422f0d6dc00acc38b5f7dc1f35e9f

 src/views/collaborativeApproval/customerVisit/index.vue

@@ -24,6 +24,7 @@
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -43,9 +44,11 @@
        <el-table-column label="拜访时间" prop="purposeDate" width="180" show-overflow-tooltip />
        <el-table-column label="拜访地点" prop="visitAddress" min-width="200" show-overflow-tooltip />
        <el-table-column label="拜访人" prop="visitingPeople" width="120" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" width="100" align="center">
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewDetail(scope.row)" style="color: #67C23A">查看</el-button>
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -124,13 +127,73 @@
        </div>
      </template>
    </el-dialog>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="formVisible"
      :title="formTitle"
      width="600px"
      @close="closeForm"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称：" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：" prop="contact">
              <el-input v-model="form.contact" placeholder="请输入联系人" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拜访人：" prop="visitingPeople">
              <el-input v-model="form.visitingPeople" placeholder="请输入拜访人" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="拜访目的：" prop="purposeVisit">
          <el-input v-model="form.purposeVisit" placeholder="请输入拜访目的" clearable />
        </el-form-item>
        <el-form-item label="拜访时间：" prop="purposeDate">
          <el-date-picker
            v-model="form.purposeDate"
            type="datetime"
            placeholder="请选择拜访时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="拜访地点：" prop="visitAddress">
          <el-input v-model="form.visitAddress" placeholder="请输入拜访地点" clearable />
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeForm">取消</el-button>
          <el-button type="primary" :loading="submitting" @click="submitForm">确定</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, addVisit, updateVisit, delVisit } from '@/api/collaborativeApproval/customerVisit.js'

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

// ===== 新增 / 编辑 =====
const formVisible = ref(false)
const formTitle = ref('新增客户拜访记录')
const formRef = ref(null)
const submitting = ref(false)
const form = reactive({
  id: undefined,
  customerName: '',
  contact: '',
  contactPhone: '',
  visitingPeople: '',
  purposeVisit: '',
  purposeDate: '',
  visitAddress: '',
  remark: ''
})
const rules = {
  customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  purposeVisit: [{ required: true, message: '请输入拜访目的', trigger: 'blur' }],
  purposeDate: [{ required: true, message: '请选择拜访时间', trigger: 'change' }],
  visitAddress: [{ required: true, message: '请输入拜访地点', trigger: 'blur' }]
}

const resetForm = () => {
  Object.assign(form, {
    id: undefined,
    customerName: '',
    contact: '',
    contactPhone: '',
    visitingPeople: '',
    purposeVisit: '',
    purposeDate: '',
    visitAddress: '',
    remark: ''
  })
  formRef.value?.clearValidate()
}

// 新增
const handleAdd = () => {
  resetForm()
  formTitle.value = '新增客户拜访记录'
  formVisible.value = true
}

// 编辑
const handleEdit = (row) => {
  resetForm()
  Object.assign(form, {
    id: row.id,
    customerName: row.customerName,
    contact: row.contact,
    contactPhone: row.contactPhone,
    visitingPeople: row.visitingPeople,
    purposeVisit: row.purposeVisit,
    purposeDate: row.purposeDate,
    visitAddress: row.visitAddress,
    remark: row.remark
  })
  formTitle.value = '编辑客户拜访记录'
  formVisible.value = true
}

// 关闭弹窗
const closeForm = () => {
  formVisible.value = false
  resetForm()
}

// 提交（新增或编辑）
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) return
    submitting.value = true
    const payload = { ...form }
    const req = payload.id ? updateVisit(payload) : addVisit(payload)
    req
      .then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess(payload.id ? '编辑成功' : '新增成功')
          formVisible.value = false
          getList()
        } else {
          proxy.$modal.msgError(res.msg || '操作失败')
        }
      })
      .finally(() => {
        submitting.value = false
      })
  })
}

// 删除
const handleDelete = (row) => {
  proxy.$modal
    .confirm(`确认删除客户“${row.customerName}”的拜访记录吗？`)
    .then(() => {
      delVisit(row.id).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('删除成功')
          getList()
        } else {
          proxy.$modal.msgError(res.msg || '删除失败')
        }
      })
    })
    .catch(() => {})
}

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