xgy-oa/klp-ui/src/views/crm/components/CustomerEdit.vue

<template>
  <div>
    <!-- 客户编号和保存按钮 -->
    <div class="save-btn-container">
      <input 
        class="customer-code-input" 
        type="text" 
        v-model="customer.customerCode"
        placeholder="请输入客户编号" 
        @input="handleInputChange" 
        :disabled="updateLoading" 
      />
      <el-button 
        class="save-btn" 
        type="primary" 
        @click="handleSave" 
        :loading="updateLoading"
      >
        保存变更
      </el-button>
    </div>
    
    <!-- 客户信息编辑表单 -->
    <el-form label-position="top" :model="customer" :disabled="updateLoading">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公司" prop="company">
            <el-input 
              v-model="customer.companyName" 
              placeholder="请输入公司名称" 
              @input="handleInputChange" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactPerson">
            <el-input 
              v-model="customer.contactPerson" 
              placeholder="请输入联系人"
              @input="handleInputChange" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系方式" prop="contactWay">
            <el-input 
              v-model="customer.contactWay" 
              placeholder="请输入客户联系方式"
              @input="handleInputChange" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="税号" prop="taxNumber">
            <el-input 
              v-model="customer.taxNumber" 
              placeholder="请输入税号"
              @input="handleInputChange" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户行业" prop="industry">
            <el-select 
              v-model="customer.industry" 
              placeholder="请选择客户行业" 
              clearable
              @change="handleInputChange"
            >
              <el-option 
                v-for="item in dict.type.customer_industry" 
                :key="item.value" 
                :label="item.label"
                :value="item.value" 
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户等级" prop="level">
            <el-select 
              v-model="customer.customerLevel" 
              placeholder="请选择客户等级" 
              clearable
              @change="handleInputChange"
            >
              <el-option 
                v-for="item in dict.type.customer_level" 
                :key="item.value" 
                :label="item.label"
                :value="item.value" 
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-hasPermi="['crm:customer:address']">
          <el-form-item label="客户地址" prop="address">
            <el-input 
              v-model="customer.address" 
              placeholder="请输入客户地址"
              @input="handleInputChange" 
            />
            <!-- <ChinaAreaSelect
              v-model="customer.address"
              placeholder="请选择客户地址"
              @change="handleInputChange"
            /> -->
          </el-form-item>
        </el-col>
        <el-col :span="24" v-hasPermi="['crm:customer:bank']">
          <el-form-item label="银行信息" prop="bankInfo">
            <JSONTableInput 
              @change="handleInputChange" 
              v-model="customer.bankInfo"
              :columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" 
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import JSONTableInput from './JSONTableInput.vue'
import ChinaAreaSelect from '@/components/ChinaAreaSelect/index.vue'

export default {
  name: 'CustomerEdit',
  components: {
    JSONTableInput,
    ChinaAreaSelect
  },
  props: {
    // 客户信息对象（双向绑定）
    customer: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 字典数据
    dict: {
      type: Object,
      required: true,
      default: () => ({ type: {} })
    },
    // 更新加载状态
    updateLoading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['detail-change', 'save-change'],
  methods: {
    // 输入变更事件透传
    handleInputChange() {
      this.$emit('detail-change')
    },
    // 保存按钮点击事件透传
    handleSave() {
      this.$emit('save-change')
    }
  }
}
</script>

<style scoped>
/* 客户编号输入框样式 */
.customer-code-input {
  width: 300px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #606266;
  background-color: transparent;
  transition: border-color 0.2s, background-color 0.2s;
  outline: none;
  box-sizing: border-box;
}

/* 输入框 hover 状态 */
.customer-code-input:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
}

/* 输入框 focus 状态 */
.customer-code-input:focus {
  border-color: #409eff;
  background-color: #fff;
}

/* 禁用状态 */
.customer-code-input:disabled {
  background-color: #f5f7fa;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 保存变更按钮容器 */
.save-btn-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 保存按钮自定义样式 */
.save-btn {
  padding: 8px 20px;
  font-size: 14px;
}
</style>