From da15eabeedbdd1170ae676ee5fd11ac81627d232 Mon Sep 17 00:00:00 2001
From: monanxiao <monanxiao@qq.com>
Date: Fri, 11 Oct 2024 16:02:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AE=A2=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E3=80=81=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/index.vue  | 435 ++++++++++++++++++++++++++++++++++++-
 src/views/order/options.js |  86 ++++++++
 2 files changed, 518 insertions(+), 3 deletions(-)
 create mode 100644 src/views/order/options.js

diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 067084c..4c23945 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,10 +1,439 @@
 <template>
   <el-card>
-    <div>订单列表</div>
+
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="服务项目"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="订单编号"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+
+      <el-col :span="4">
+        <el-select v-model="ruleForm" placeholder="订单状态">
+          <el-option label="全部" value="" />
+          <el-option label="待付款" value="0" />
+          <el-option label="已付款" value="1" />
+        </el-select>
+
+      </el-col>
+
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="维修费用"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="用户昵称"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+
+    </el-row>
+
+
+  </el-card>
+
+  <el-card class="mt10">
+    <el-table
+        ref="table"
+        :data="tableData"
+        :default-sort="{ prop: 'date', order: 'descending' }"
+        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        border
+        stripe
+        style="width: 100%"
+    >
+
+      <el-table-column
+          label="编号"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="状态"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="服务项目"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="预约时间"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="维修费用"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="微信昵称"
+          prop="name"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+
+
+      <el-table-column label="头像" width="200" align="center">
+        <template #default="scope">
+          <el-avatar :size="50" :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          label="下单时间"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="付款时间"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column label="操作" width="280px" align="center">
+        <template v-slot:default="scope">
+          <el-button type="info" @click="drawer = true">详情</el-button>
+          <el-button type="danger">退款</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
+    />
+
+    <el-drawer v-model="drawer" :direction="direction">
+      <template #header>
+        <h4>订单详情</h4>
+      </template>
+      <template #default>
+
+        <el-descriptions
+            class="margin-top"
+            title="订单信息"
+            :column="3"
+            :size="size"
+            border
+            style="margin-bottom: 20px"
+        >
+
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">
+                订单编号
+              </div>
+            </template>
+            20111116171087
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">
+                预约时间
+              </div>
+            </template>
+              2024-01-01 12:00:00
+          </el-descriptions-item>
+
+
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">
+                预约费用
+              </div>
+            </template>
+            0.00元
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">
+                报价费用
+              </div>
+            </template>
+            8102.01元
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <div class="cell-item">
+                订单状态
+              </div>
+            </template>
+            未付款
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+            class="margin-top"
+            title="客户信息"
+            :column="3"
+            :size="size"
+            border
+            style="margin-bottom: 20px"
+        >
+          <el-descriptions-item label="微信昵称">kooriookami</el-descriptions-item>
+          <el-descriptions-item label="联系电话">188****1111</el-descriptions-item>
+          <el-descriptions-item label="地址">
+            重庆市南岸区星光花园小区8号楼602
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+            class="margin-top"
+            title="勘察工程师信息"
+            :column="3"
+            :size="size"
+            border
+            style="margin-bottom: 20px"
+        >
+
+          <el-descriptions-item label="名字">张三</el-descriptions-item>
+          <el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
+          <el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
+
+        </el-descriptions>
+
+        <el-descriptions
+            class="margin-top"
+            title="维修工程师信息"
+            :column="3"
+            :size="size"
+            border
+            style="margin-bottom: 20px"
+        >
+
+          <el-descriptions-item label="名字">李四</el-descriptions-item>
+          <el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
+          <el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
+        </el-descriptions>
+
+        <div style="display: flex;justify-content: flex-end;margin-top: 50px">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="danger" @click="confirmClick">退款</el-button>
+        </div>
+      </template>
+
+    </el-drawer>
   </el-card>
 </template>
-
 <script setup>
+import * as XLSX from 'xlsx'
+import {
+  Edit,
+  Delete,
+  InfoFilled,
+  View,
+  ArrowDownBold,
+  Plus,
+} from '@element-plus/icons-vue'
+import {nextTick, onMounted, reactive, ref} from 'vue'
+
+import {options} from './options.js'
+import {getUserList} from "../../api/modules/user";
+
+const tableData = ref([])
+const dataList = ref([])
+const table = ref()
+const tabclickIndex = ref()
+const isExpand = ref(false)
+const columnData = ref(JSON.parse(JSON.stringify(options)))
+const disabled = ref(false)
+const dialogVisible = ref(false)
+const total = ref(0)
+const formInline = ref({})
+const registerDate = ref('');
+const searchName = ref('');
+const drawer = ref(false)
+const queryData = ref({
+  keyWord: '',
+  page: 1,
+  size: 10,
+})
+
+const initData = () => {
+
+  tableData.value = columnData.value;
+
+  // orderLists(queryData.value).then((res) => {
+  //   console.log(res.data.data)
+  //   // total.value = res.data.data.total
+  //   tableData.value = res.data.data
+  // })
+}
+const itemEditHanld = (item) => {
+  item.itemEdit = !item.itemEdit
+  // // console.log(JSON.stringify(item));
+  // tabclickIndex.value = item;
+}
+const handleSizeChange = (val) => {
+  console.log(val)
+}
+const handleSelectionChange = (val) => {
+}
+const handleCurrentChange = (val) => {
+  queryData.value.size = 10
+  queryData.value.page = val
+  initData(queryData.value)
+}
+const handleClose = () => {
+}
+const dialogVisibleHanle = () => {
+  console.log('滑动加载')
+}
+const handleExpand = () => {
+  isExpand.value = false
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+const handleOpen = () => {
+  isExpand.value = true
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+// 搜索事件
+const searchEvnt = ()=> {
+  console.log('点击搜索');
+};
+
+onMounted(() => {
+  initData()
+})
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mt-4 {
+  float: right;
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+}
+
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
+.icon-view {
+  font-size: 20px;
+  color: #673ab7;
+  margin: 0 10px;
+}
+
+.icon-edit {
+  font-size: 20px;
+  color: #2f60c2;
+  margin: 0 10px;
+}
+
+.icon-dele {
+  font-size: 20px;
+  color: #ff5722;
+}
+
+.btn-color {
+  background: #fff;
+  color: #4c60cc;
+}
+
+.expand-title {
+  padding: 10px;
+  color: #919399;
+  font-weight: 600;
+}
+</style>
diff --git a/src/views/order/options.js b/src/views/order/options.js
new file mode 100644
index 0000000..f20a060
--- /dev/null
+++ b/src/views/order/options.js
@@ -0,0 +1,86 @@
+export const options = [
+    {
+    userId: 1,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '高永建',
+      nickname: '软件开发老高',
+      mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+  {
+    userId: 2,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '张三',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-10 10:11:01'
+  },
+  {
+    userId: 3,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '李四',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-13 10:11:01'
+  },
+  {
+    userId: 4,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-02 10:11:01'
+  },{
+    userId: 5,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-01 10:11:01'
+  },
+  {
+    userId: 6,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 7,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 8,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 9,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 10,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+  {
+    userId: 11,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+
+];
\ No newline at end of file