修改订单详情

src/stores/order/orderDetail.ts

@@ -34,6 +34,10 @@ export const OrderDetailStore = defineStore('orderDetail', () => {
     const res = await axios.$get(`${api.url}/${payload}`);
     return res;
   };
+  const detail = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$get(`${api.url}/detail/${payload}`);
+    return res;
+  };
   const create = async (payload: any): Promise<IQueryResult> => {
     const res = await axios.$post(`${api.url}`, payload);
     return res;
@@ -54,6 +58,7 @@ export const OrderDetailStore = defineStore('orderDetail', () => {
     query,
     queryInfo,
     fetch,
+    detail,
     create,
     update,
     del

src/views/order/detail.vue

@@ -5,22 +5,84 @@
         <el-col :span="24" class="one">
           <cSearch :is_back="true" @toBack="toBack"></cSearch>
         </el-col>
-        <el-col :span="24" class="two">
-          <cForm :span="24" :fields="fields" :form="form" :rules="rules" @save="toSave" label-width="auto">
-            <template #gender>
-              <el-option v-for="i in genderList" :key="i.value" :label="i.label" :value="i.value"></el-option>
-            </template>
-            <template #role>
-              <el-option v-for="i in roleList" :key="i.code" :label="i.name" :value="i.code"></el-option>
-            </template>
-            <template #street>
-              <el-option @click="toChange(i)" v-for="i in streetList" :key="i._id" :label="i.name" :value="i._id"></el-option>
-            </template>
-            <template #community>
-              <el-option v-for="i in communityList" :key="i._id" :label="i.name" :value="i._id"></el-option>
-            </template>
-          </cForm>
-        </el-col>
+        <div class="center">
+          <el-col :span="12" class="two">
+            <el-col :span="24" class="two_1">
+              <el-col :span="12" class="left">
+                <el-icon>
+                  <Shop />
+                </el-icon>
+                {{ info.supplier_name || '暂无' }}
+              </el-col>
+              <el-col :span="12" class="right"> {{ info.zhStatus }}</el-col>
+            </el-col>
+            <el-col :span="24" class="two_2">
+              <el-col :span="9" class="left">
+                <el-image v-if="info.spec_file" class="image" :src="info.spec_file && info.spec_file.length > 0 ? info.spec_file[0].url : ''" />
+                <el-image v-else class="image" :src="info.good_file && info.good_file.length > 0 ? info.good_file[0].url : ''" />
+              </el-col>
+              <el-col :span="15" class="right">
+                <el-col :span="24" class="name">
+                  <text>{{ info.zhType || '暂无' }}</text>
+                  <text>{{ info.good_name || '暂无' }}</text>
+                </el-col>
+                <el-col :span="24" class="spec">
+                  <text>规格：{{ info.spec_name || '暂无' }}</text>
+                </el-col>
+                <el-col :span="24" class="num">
+                  <text>数量：{{ info.num || '暂无' }}</text>
+                </el-col>
+                <el-col :span="24" class="money">
+                  <text>￥{{ info.money || '暂无' }}</text>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="thr">
+            <el-col :span="24" class="thr_1">
+              <text>订单号：</text>
+              <text>{{ info.order_id || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="thr_1">
+              <text>下单时间：</text>
+              <text>{{ info.buy_time || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="thr_1" v-if="info.leader_name">
+              <text>采购审批领导：</text>
+              <text>{{ info.leader_name || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="thr_1" v-if="info.accounting_name">
+              <text>采购审批会计：</text>
+              <text>{{ info.accounting_name || '暂无' }}</text>
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="four">
+            <el-col :span="24" class="four_1">
+              <text>下单人员：</text>
+              <text>{{ info.user_name || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="four_1">
+              <text>下单角色：</text>
+              <text>{{ info.zhRole || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="four_1">
+              <text>下单人员电话：</text>
+              <text>{{ info.user_tel || '暂无' }}</text>
+            </el-col>
+            <el-col :span="24" class="four_1">
+              <text>收货地址：</text>
+              <text>{{ info.address || '暂无' }}</text>
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="five">
+            <el-col :span="12" class="left">
+              <text>商品总价</text>
+            </el-col>
+            <el-col :span="12" class="right">
+              <text>￥{{ info.total_money || '暂无' }}</text>
+            </el-col>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -29,42 +91,26 @@
 <script setup lang="ts">
 // 基础
 import type { Ref } from 'vue';
-import { ref, reactive, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import type { FormRules } from 'element-plus';
+import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 // 接口
-import { UserStore } from '@/stores/users/user';
-import { OfficeStore } from '@/stores/office/office';
+import { OrderDetailStore } from '@/stores/order/orderDetail';
+import { DictDataStore } from '@/stores/dict/dictData';
 import { RoleStore } from '@/stores/role/role'; // 角色
-import { DictDataStore } from '@/stores/dict/dictData'; // 字典表
 import type { IQueryResult } from '@/util/types.util';
-const userAxios = UserStore();
-const dictAxios = DictDataStore();
-const officeAxios = OfficeStore();
+const dictData = DictDataStore();
 const roleAxios = RoleStore();
+const orderDetailAxios = OrderDetailStore();
 // 路由
 const route = useRoute();
 // 加载中
 const loading: Ref<any> = ref(false);
 // 表单
-let form: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([
-  { label: '微信用户标识', model: 'openid', options: { disabled: true } },
-  { label: '联系电话', model: 'tel' },
-  { label: '姓名', model: 'name' },
-  { label: '性别', model: 'gender', type: 'select' },
-  { label: '角色', model: 'role', type: 'select' },
-  { label: '所属街道', model: 'street', type: 'select' },
-  { label: '所属社区', model: 'community', type: 'select' }
-]);
-const rules = reactive<FormRules>({});
+let info: Ref<any> = ref({});
 // 字典表
-const genderList: Ref<any> = ref([]);
-const roleList: Ref<any> = ref([]);
-const streetList: Ref<any> = ref([]);
-const communityList: Ref<any> = ref([]);
 const statusList: Ref<any> = ref([]);
+const typeList: Ref<any> = ref([]);
+const roleList: Ref<any> = ref([]);
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -75,48 +121,44 @@ onMounted(async () => {
 const search = async () => {
   let id = route.query.id;
   if (id) {
-    let res: IQueryResult = await userAxios.fetch(id);
+    let res: any = await orderDetailAxios.detail(id);
     if (res.errcode == '0') {
-      let info: any = res.data as {};
-      form.value = info;
-      // 所属社区
-      res = await officeAxios.query({ belong: info.street, type: '1', is_use: '0' });
-      if (res.errcode == '0') communityList.value = res.data;
+      res.data.zhStatus = await searchDict(res.data.status, 'status');
+      res.data.zhType = await searchDict(res.data.good_type, 'type');
+      res.data.zhRole = await searchDict(res.data.user_role, 'role');
+      info.value = res.data as {};
     }
   }
 };
-const toChange = async (val: any) => {
-  form.value.community = '';
-  let res: IQueryResult;
-  // 所属社区
-  res = await officeAxios.query({ belong: val._id, type: '1', is_use: '0' });
-  if (res.errcode == '0') communityList.value = res.data;
-};
-// 保存
-const toSave = async (data) => {
-  let res: IQueryResult;
-  if (data._id) res = await userAxios.update(data);
-  else res = await userAxios.create(data);
-  if (res.errcode == 0) {
-    ElMessage({ type: `success`, message: `维护信息成功` });
-    toBack();
+// 查询字典表
+const searchDict = async (e, model) => {
+  let data;
+  if (model == 'status') {
+    data = statusList.value.find((i) => i.value == e);
+    if (data) return data.label;
+    else return '暂无';
+  } else if (model == 'type') {
+    data = typeList.value.find((i) => i.value == e);
+    if (data) return data.label;
+    else return '暂无';
+  } else {
+    data = roleList.value.find((i) => i.code == e);
+    if (data) return data.name;
+    else return '暂无';
   }
 };
 // 查询其他信息
 const searchOther = async () => {
   let res: IQueryResult;
-  // 性别
-  res = await dictAxios.query({ type: 'gender', is_use: '0' });
-  if (res.errcode == '0') genderList.value = res.data;
-  // 角色
-  res = await roleAxios.query({ type: 'role', is_use: '0' });
-  if (res.errcode == '0') roleList.value = res.data;
-  // 所属街道
-  res = await officeAxios.query({ type: '0', is_use: '0' });
-  if (res.errcode == '0') streetList.value = res.data;
   // 状态
-  res = await dictAxios.query({ type: 'status', is_use: '0' });
+  res = await dictData.query({ type: 'order_status', is_use: '0' });
   if (res.errcode == '0') statusList.value = res.data;
+  // 类型
+  res = await dictData.query({ type: 'goods_type', is_use: '0' });
+  if (res.errcode == '0') typeList.value = res.data;
+  // 角色
+  res = await roleAxios.query({ is_use: '0' });
+  if (res.errcode == '0') roleList.value = res.data;
 };
 // 返回上一页
 const toBack = () => {
@@ -124,51 +166,132 @@ const toBack = () => {
 };
 </script>
 <style scoped lang="scss">
-.study {
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.two {
   width: 100%;
-  .study_1 {
-    margin: 0 0 10px 0;
-    span {
-      font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 15px;
+  border: 1px solid #f1f1f1;
+  border-radius: 10px;
+
+  .two_1 {
+    display: flex;
+    justify-content: space-around;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #e2e2e2;
+
+    .left {
+      display: flex;
+      align-items: center;
     }
-    span:first-child {
-      color: #ff0000;
+
+    .right {
+      color: red;
+      text-align: right;
     }
   }
-  .study_2 {
-    .study_2_info {
-      width: 100%;
-      display: flex;
-      .info_1 {
-        position: relative;
-        max-width: 24%;
-        border: 1px solid #67c23a;
-        padding: 0 10px;
+
+  .two_2 {
+    display: flex;
+    padding: 10px 0;
+
+    .left {
+      .image {
+        width: 200px;
+        height: 200px;
         border-radius: 5px;
-        margin: 0 10px 0 0;
-        .txt {
-          position: absolute;
-          top: -15px;
-          left: 10px;
-          span {
-            display: inline-block;
-            padding: 6px 15px;
-            background: #67c23a;
-            color: #fff;
-            border-radius: 5px;
-            font-size: 16px;
-            font-weight: bold;
-            line-height: 1;
-          }
-        }
-        .info {
-          margin: 15px 0 0 0;
-          .label {
-            margin: 0 0 10px 0;
-          }
+        border: 1px solid #f9f9f9;
+      }
+    }
+
+    .right {
+      .name {
+        padding: 10px 0 0 0;
+        font-size: 20px;
+
+        text:first-child {
+          font-size: 16px;
+          color: #ffffff;
+          background-color: #007AFF;
+          border-radius: 5px;
+          padding: 2px 5px;
         }
       }
+
+      .spec {
+        font-size: 16px;
+      }
+
+      .num {
+        font-size: 16px;
+        color: #858585;
+      }
+
+      .money {
+        font-size: 18px;
+        color: red;
+        font-weight: bold;
+      }
     }
   }
 }
+
+.thr {
+  width: 100%;
+  margin: 10px 0 0 0;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #f1f1f1;
+
+  .thr_1 {
+    padding: 5px 0;
+    font-size: 18px;
+
+    text:first-child {
+      color: #858585;
+    }
+  }
+}
+
+.four {
+  width: 100%;
+  margin: 1vw 0 0 0;
+  padding: 0 10px;
+  border-radius: 10px;
+  border: 1px solid #f1f1f1;
+
+  .four_1 {
+    padding: 5px 0;
+    font-size: 18px;
+
+    text:first-child {
+      color: #858585;
+    }
+  }
+}
+
+.five {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0 0 0;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 18px;
+  border: 1px solid #f1f1f1;
+
+  .left {
+    color: #858585;
+  }
+
+  .right {
+    text-align: right;
+  }
+}
 </style>

vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
         },
         '/material/v1/api': {
-          target: 'http://192.168.1.113:13004',
+          target: 'http://192.168.3.15:13004',
           changeOrigin: true,
           ws: false
         }