✨ feat: crm初步

klp-ui/src/views/crm/order/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="5" style="border-right: 1px solid #e4e7ed;">
+        <div style="font-weight: 900;">订单列表</div>
+        <div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
+          <!-- 主搜索和添加 -->
+          <el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入订单编号搜索"
+            v-model="queryParams.orderNum"></el-input>
+          <el-button icon="el-icon-search" @click="toggleQuery"></el-button>
+          <el-button type="primary" icon="el-icon-plus" style="margin-left: 0;"></el-button>
+        </div>
+        <div v-show="showQuery"
+          style="display: flex; align-items: center; gap: 5px; margin-top: 10px; flex-wrap: wrap;">
+          <!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
+          <!-- 客户行业和客户等级的下拉选 -->
+          <el-select style="width: 100px;" v-model="queryParams.customerId" placeholder="客户" clearable>
+            <el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+          <el-select style="width: 100px;" v-model="queryParams.salesman" placeholder="销售员" clearable>
+            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+          <el-select style="width: 100px;" v-model="queryParams.orderStatus" placeholder="订单状态" clearable>
+            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+          <el-select style="width: 100px;" v-model="queryParams.financeStatus" placeholder="财务状态" clearable>
+            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </div>
+        <div>
+          <!-- 列表区域 -->
+          <KLPList :listData="orderList" listKey="orderId" :loading="orderLoading" />
+        </div>
+      </el-col>
+
+      <el-col :span="19">
+        <el-tabs v-model="activeTab" type="border-card">
+          <el-tab-pane label="订单详情" name="detail">
+            <div class="order-detail" v-if="activeTab === 'detail'">
+              <!-- 订单详情内容 -->
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="财务状态" name="finance">
+            <div class="order-finance" v-if="activeTab === 'finance'">
+              <!-- 财务状态内容 -->
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="订单异议" name="dispute">
+            <div class="order-dispute" v-if="activeTab === 'dispute'">
+              <!-- 订单异议内容 -->
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="操作记录" name="record">
+            <div class="order-record" v-if="activeTab === 'record'">
+              <!-- 操作记录内容 -->
+            </div>
+          </el-tab-pane>
+           <el-tab-pane label="钢卷追溯" name="trace">
+            <div class="order-trace" v-if="activeTab === 'trace'">
+              <!-- 钢卷追溯内容 -->
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import KLPList from '@/components/KLPUI/KLPList/index.vue'
+
+export default {
+  name: 'OrderPage',
+  components: {
+    KLPList
+  },
+  dicts: ['customer_level', 'customer_industry'],
+  data() {
+    return {
+      showQuery: false,
+      queryParams: {
+        orderNum: '',
+        customerId: '',
+        salesman: '',
+        orderStatus: '',
+        financeStatus: ''
+      },
+      activeTab: 'detail',
+      currentOrder: {},
+      orderList: [],
+      orderLoading: false
+    }
+  },
+  methods: {
+    toggleQuery() {
+      this.showQuery = !this.showQuery
+    },
+  }
+}
+</script>