From b7cc8bac6136f3fbd915f15351725260ea392135 Mon Sep 17 00:00:00 2001
From: monanxiao <monanxiao@qq.com>
Date: Fri, 11 Oct 2024 16:44:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8E=92=E7=8F=AD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/scheduling/maintain.vue       | 282 ++++++++++++++++++-
 src/views/scheduling/options.js         |  97 +++++++
 src/views/scheduling/reconnaissance.vue | 342 +++++++++++++++++++++++-
 3 files changed, 715 insertions(+), 6 deletions(-)
 create mode 100644 src/views/scheduling/options.js

diff --git a/src/views/scheduling/maintain.vue b/src/views/scheduling/maintain.vue
index 0f6009b..4ebe63a 100644
--- a/src/views/scheduling/maintain.vue
+++ b/src/views/scheduling/maintain.vue
@@ -1,10 +1,286 @@
 <template>
   <el-card>
-    <div>维修人员排班</div>
+
+    <el-row :gutter="10">
+
+      <el-col :span="4">
+        <el-button type="success" @click="drawer = true">
+          <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+          添加排班
+        </el-button>
+      </el-col>
+
+      <el-col :span="4">
+        <div class="block">
+          <el-date-picker
+              v-model="registerDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="注册开始日期"
+              end-placeholder="注册截至日期"
+              :size="size"
+          />
+        </div>
+      </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-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="头像" width="200" align="center">
+        <template #default="scope">
+          <el-avatar :size="50" :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="微信昵称"
+          prop="nickname"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="名字"
+          prop="name"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="手机号"
+          prop="mobile"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="排班日期"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="排班时间段"
+          prop="timeToTime"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+      />
+
+    </el-table>
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
+    />
   </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 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/scheduling/options.js b/src/views/scheduling/options.js
new file mode 100644
index 0000000..f7fbfca
--- /dev/null
+++ b/src/views/scheduling/options.js
@@ -0,0 +1,97 @@
+export const options = [
+    {
+    userId: 1,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '高永建',
+      nickname: '软件开发老高',
+      mobile: '19136448763',
+    date: '2024-10-11',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+  {
+    userId: 2,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '张三',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+    timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+  {
+    userId: 3,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '李四',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+    timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+  {
+    userId: 4,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+    timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },{
+    userId: 5,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+    timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+  {
+    userId: 6,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '李四',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },{
+    userId: 7,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '张三',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },{
+    userId: 8,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-07',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },{
+    userId: 9,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-08',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },{
+    userId: 10,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-09',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+  {
+    userId: 11,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-10',
+      timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
+  },
+
+];
\ No newline at end of file
diff --git a/src/views/scheduling/reconnaissance.vue b/src/views/scheduling/reconnaissance.vue
index e51d7c1..1b13ea1 100644
--- a/src/views/scheduling/reconnaissance.vue
+++ b/src/views/scheduling/reconnaissance.vue
@@ -1,10 +1,346 @@
 <template>
   <el-card>
-    <div>勘察人员排班</div>
+
+    <el-row :gutter="10">
+
+      <el-col :span="4">
+        <el-button type="success" @click="drawer = true">
+          <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+          创建排班
+        </el-button>
+      </el-col>
+
+      <el-col :span="4">
+        <div class="block">
+          <el-date-picker
+              v-model="registerDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="注册开始日期"
+              end-placeholder="注册截至日期"
+              :size="size"
+          />
+        </div>
+      </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-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-drawer v-model="drawer" :direction="direction">
+      <template #header>
+        <h4>创建排班</h4>
+      </template>
+      <template #default>
+
+        <el-input
+            v-model="input1"
+            style="max-width: 600px;margin-bottom: 20px"
+            placeholder="请输入活动名称"
+        >
+          <template #prepend>活动名称</template>
+        </el-input>
+
+        <el-upload
+            class="upload-demo"
+            drag
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            multiple
+        >
+          <el-icon class="el-icon--upload">
+            <upload-filled/>
+          </el-icon>
+          <div class="el-upload__text">
+            点击或拖拽上传缩略图(横幅缩略图)
+          </div>
+          <template #tip>
+            <div class="el-upload__tip">
+              文件格式：jpg/png
+            </div>
+          </template>
+        </el-upload>
+
+        <el-upload
+            class="upload-demo"
+            drag
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            multiple
+        >
+          <el-icon class="el-icon--upload">
+            <upload-filled/>
+          </el-icon>
+          <div class="el-upload__text">
+            点击或拖拽上传活动长图（活动详情）
+          </div>
+          <template #tip>
+            <div class="el-upload__tip">
+              文件格式：jpg/png
+            </div>
+          </template>
+        </el-upload>
+
+        <div style="display: flex;justify-content: flex-end;margin-top: 50px">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+
+    </el-drawer>
+  </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="头像" width="200" align="center">
+        <template #default="scope">
+          <el-avatar :size="50" :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="微信昵称"
+          prop="nickname"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="名字"
+          prop="name"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="手机号"
+          prop="mobile"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="排班日期"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="排班时间段"
+          prop="timeToTime"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+      />
+
+    </el-table>
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
+    />
   </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>