From ff457233e9e2a6911aaff1c0351821cf847d27aa Mon Sep 17 00:00:00 2001
From: lzyyj <lzyyj@sina.com>
Date: Fri, 11 Oct 2024 18:06:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8F=A3=EF=BC=9A=201?=
 =?UTF-8?q?=E3=80=81=E7=99=BB=E5=BD=95=E6=8E=A5=E5=8F=A3=202=E3=80=81?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8E=A5=E5=8F=A3=E6=94=B9=E6=A8=A1=E6=8B=9F?=
 =?UTF-8?q?=203=E3=80=81=E6=9C=8D=E5=8A=A1=E9=A1=B9=E7=9B=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E5=AE=8C=E6=88=9090%(=E6=A0=87=E9=A2=98=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E6=9C=AA=E5=A4=84=E7=90=86)=204?=
 =?UTF-8?q?=E3=80=81=E6=9C=8D=E5=8A=A1=E9=85=8D=E7=BD=AE=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E6=88=9090%=EF=BC=88=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=9C=AA=E5=AE=8C=E6=88=90=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/config.js          |  18 ++
 src/layout/menu/menuTable.js       |   5 +
 src/router/originalRoutingTable.js |  20 +++
 src/views/config/index.vue         | 259 +++++++++++++++++++++++++++++
 src/views/config/options.js        |  21 +++
 src/views/goods/index.vue          |  19 +--
 6 files changed, 328 insertions(+), 14 deletions(-)
 create mode 100644 src/api/modules/config.js
 create mode 100644 src/views/config/index.vue
 create mode 100644 src/views/config/options.js

diff --git a/src/api/modules/config.js b/src/api/modules/config.js
new file mode 100644
index 0000000..a3e9906
--- /dev/null
+++ b/src/api/modules/config.js
@@ -0,0 +1,18 @@
+import service from "../request.js";
+const API_BASE_URL = '/config';
+
+// 客户列表
+export function getConfigList(query) {
+    return service({
+        method: "get",
+        url: `${API_BASE_URL}/list`,
+        data: query,
+    });
+}
+export function updateConfig(query) {
+    return service({
+        method: "put",
+        url: `${API_BASE_URL}`,
+        data: query,
+    });
+}
diff --git a/src/layout/menu/menuTable.js b/src/layout/menu/menuTable.js
index 985bd02..1a044d3 100644
--- a/src/layout/menu/menuTable.js
+++ b/src/layout/menu/menuTable.js
@@ -10,6 +10,11 @@ const menuTable = [
     url: "/home",
     icon: "HomeFilled",
   },
+  {
+    title: "服务配置",
+    url: "/config",
+    icon: "HomeFilled",
+  },
   {
     title: "服务项目",
     url: "/goods",
diff --git a/src/router/originalRoutingTable.js b/src/router/originalRoutingTable.js
index febbd77..845924f 100644
--- a/src/router/originalRoutingTable.js
+++ b/src/router/originalRoutingTable.js
@@ -75,6 +75,26 @@ const routerList = [
       },
     ],
   },
+  {
+    path: "/config",
+    component: Layout,
+    redirect: "config",
+    meta: {
+      requiresAuth: true, //有一些页面是否登录才能进去
+      name: "服务配置",
+    },
+    children: [
+      {
+        path: "/config",
+        name: "config",
+        component: () => import("../views/config/index.vue"),
+        meta: {
+          requiresAuth: true, //有一些页面是否登录才能进去
+          name: "服务配置",
+        },
+      },
+    ],
+  },
   {
     path: "/goods",
     component: Layout,
diff --git a/src/views/config/index.vue b/src/views/config/index.vue
new file mode 100644
index 0000000..720e898
--- /dev/null
+++ b/src/views/config/index.vue
@@ -0,0 +1,259 @@
+<template>
+  <el-card shadow="never">
+    <el-table
+      :data="tableData"
+      :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+      border
+      stripe
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="item in options"
+        :key="item.type"
+        :prop="item.props"
+        :label="item.label"
+        :width="item.width"
+        :align="item.align"
+        show-overflow-tooltip
+        :fixed="item.fixed"
+      >
+        <template v-slot:default="scope" v-if="item.props === 'actions'">
+          <el-icon class="icon-view" @click="ItemView(scope.row)"
+            ><View
+          /></el-icon>
+          <el-icon class="icon-edit" @click="editorClick(scope.row)"
+            ><Edit
+          /></el-icon>
+          <el-popconfirm
+            confirm-button-text="确认"
+            cancel-button-text="取消"
+            :icon="InfoFilled"
+            icon-color="#626AEF"
+            title="确定要除该服务项目?"
+            @confirm="DeleteItem(index)"
+          >
+            <template #reference>
+              <el-icon class="icon-dele"><Delete /></el-icon>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      small
+      background
+      :page-size="queryData.size"
+      layout="prev, pager, next"
+      :total="total"
+      class="mt-4"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+
+  <el-dialog
+    v-model="dialogVisible"
+    :title="`${dialogData.title}服务配置`"
+    :width="dialogWidth"
+    :hide-required-asterisk="dialogData.isView"
+    draggable
+  >
+    <el-form
+      :model="dialogData.FormData"
+      :rules="rules"
+      ref="FormRef"
+      class="demo-ruleForm"
+    >
+      <el-form-item
+        label="配置项目"
+        :label-width="formLabelWidth"
+        prop="title"
+      >
+        <el-input v-model="dialogData.FormData.title" autocomplete="off" disabled />
+      </el-form-item>
+      <el-form-item label="配置内容" :label-width="formLabelWidth" prop="content">
+        <el-input v-model="dialogData.FormData.content" autocomplete="off" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit()">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  Search,
+  Edit,
+  Delete,
+  UserFilled,
+  InfoFilled,
+  View,
+} from '@element-plus/icons-vue'
+import {
+  getConfigList,
+  updateConfig,
+} from '../../api/modules/config.js'
+import { options } from './options.js'
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getDateTime } from '../../utils'
+const queryData = ref({
+  keyWord: '',
+  page: 1,
+  size: 10,
+})
+const FormRef = ref()
+const formLabelWidth = '140px'
+const dialogData = reactive({
+  isView: true,
+  title: '添加',
+  FormData: {
+    title: '',
+    content: '',
+  },
+})
+
+const dialogWidth = ref('0')
+const rules = reactive({
+  content: [{ required: true, message: '请填写配置内容', trigger: 'change' }],
+})
+const oldTableData = ref([])
+const dialogVisible = ref(false)
+const tableData = ref([])
+const total = ref(0)
+
+const initData = () => {
+  getConfigList(queryData.value).then((res) => {
+    total.value = res.total
+    tableData.value = res.data
+  })
+}
+
+const dialogVisibleShow = () => {
+  dialogData.FormData = {
+    title: '',
+    content: '',
+  }
+  dialogVisible.value = true
+}
+const onSubmit = () => {
+  FormRef.value.validate(async (valid) => {
+    if (!valid) return
+    try {
+      if (dialogData.FormData.id) {
+        updateConfig(dialogData.FormData).then((res) => {
+          console.log('编辑数据成功')
+          console.log(ElMessage)
+          ElMessage({
+            message: '编辑服务项目成功',
+            type: 'success',
+          })
+          // tableData.value = res.data
+        })
+      } else {
+        dialogData.FormData.date = getDateTime('')
+        addGoods(dialogData.FormData)
+          .then((res) => {
+            ElMessage({
+              message: '添加服务项目成功',
+              type: 'success',
+            })
+            dialogData.FormData.id = res.data.data.id
+            tableData.value.unshift(dialogData.FormData)
+          })
+          .catch((err) => {})
+      }
+      dialogVisible.value = false
+    } catch (error) {
+      console.log(error)
+    }
+  })
+}
+const handleCurrentChange = (val) => {
+  queryData.value.page = val
+  initData(queryData.value)
+}
+const editorClick = (item) => {
+  dialogVisible.value = true
+
+  dialogData.FormData = item
+  console.log(dialogData.FormData)
+  dialogData.isView = false
+  dialogData.title = '编辑'
+}
+
+const ItemView = (item) => {
+  dialogVisible.value = true
+  dialogData.FormData = item
+  dialogData.isView = false
+  dialogData.title = ''
+}
+
+const DeleteItem = (index) => {
+  console.log(index)
+  tableData.value.splice(index, 1)
+}
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+const setDialogWidth = () => {
+  console.log(document.body.clientWidth)
+  var val = document.body.clientWidth
+  const def = 800 // 默认宽度
+  if (val < def) {
+    dialogWidth.value = '100%'
+  } else {
+    dialogWidth.value = def + 'px'
+  }
+}
+onMounted(() => {
+  setDialogWidth()
+  window.onresize = () => {
+    return (() => {
+      setDialogWidth()
+    })()
+  }
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.henader-card {
+  margin-bottom: 20px;
+}
+.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;
+}
+.mt-4 {
+  float: right;
+  text-align: right;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.el-button--text {
+  margin-right: 15px;
+}
+.el-select {
+  width: 300px;
+}
+.el-input {
+  width: 300px;
+}
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+</style>
diff --git a/src/views/config/options.js b/src/views/config/options.js
new file mode 100644
index 0000000..989d037
--- /dev/null
+++ b/src/views/config/options.js
@@ -0,0 +1,21 @@
+export const options = [
+  {
+    label: '配置项目',
+    props: 'title',
+    width: 'auto',
+    align: 'left'
+  },
+  {
+    label: '配置内容',
+    props: 'content',
+    width: 'auto',
+    align: 'left'
+  },
+  {
+    label: '操作',
+    props: 'actions',
+    width: '150',
+    align: 'center',
+    fixed: 'right',
+  }
+]
diff --git a/src/views/goods/index.vue b/src/views/goods/index.vue
index 89b01a6..77c3d02 100644
--- a/src/views/goods/index.vue
+++ b/src/views/goods/index.vue
@@ -2,22 +2,13 @@
   <el-card shadow="never" class="henader-card">
     <div class="flx-row">
       <el-form :inline="true" :model="queryData" style="flex: 1">
-        <el-input placeholder="请输入搜索内容" v-model="queryData.keyWord">
-        </el-input>
-        <el-date-picker
-          class="ml20"
-          v-model="queryData.date"
-          type="datetimerange"
-          :shortcuts="shortcuts"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
+<!--        <el-input placeholder="请输入搜索内容" v-model="queryData.keyWord">-->
+<!--        </el-input>-->
       </el-form>
       <div class="flex-right">
-        <el-button type="primary" :icon="Search" @click="initData" class="ml20"
-          >搜索</el-button
-        >
+<!--        <el-button type="primary" :icon="Search" @click="initData" class="ml20"-->
+<!--          >搜索</el-button-->
+<!--        >-->
         <el-button type="primary" @click="dialogVisibleShow">+添加</el-button>
       </div>
     </div>