feat(crm): 新增客户管理相关组件和功能

新增客户信息展示、编辑组件及订单管理功能
优化客户详情页布局和交互体验
重构订单管理模块，增加客户关联功能

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

@@ -0,0 +1,200 @@
+<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="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 
+              type="textarea" 
+              v-model="customer.address" 
+              placeholder="请输入客户地址"
+              @input="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'
+
+export default {
+  name: 'CustomerEdit',
+  components: {
+    JSONTableInput
+  },
+  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>