From 017e64125db0ae99bb2a5bd89478d235827ca737 Mon Sep 17 00:00:00 2001
From: monanxiao <monanxiao@qq.com>
Date: Sat, 12 Oct 2024 10:58:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E6=BB=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/config.js   |  18 +++
 src/api/modules/goods.js    |  25 ++++
 src/views/config/index.vue  | 259 ++++++++++++++++++++++++++++++++++++
 src/views/config/options.js |  21 +++
 src/views/goods/options.js  |  34 +++++
 5 files changed, 357 insertions(+)
 create mode 100644 src/api/modules/config.js
 create mode 100644 src/api/modules/goods.js
 create mode 100644 src/views/config/index.vue
 create mode 100644 src/views/config/options.js
 create mode 100644 src/views/goods/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/api/modules/goods.js b/src/api/modules/goods.js
new file mode 100644
index 0000000..1fb7207
--- /dev/null
+++ b/src/api/modules/goods.js
@@ -0,0 +1,25 @@
+import service from "../request.js";
+const API_BASE_URL = '/goods';
+
+// 客户列表
+export function getGoodsList(query) {
+    return service({
+        method: "get",
+        url: `${API_BASE_URL}/list`,
+        data: query,
+    });
+}
+export function addGoods(query) {
+    return service({
+        method: "post",
+        url: `${API_BASE_URL}`,
+        data: query,
+    });
+}
+export function updateGoods(query) {
+    return service({
+        method: "put",
+        url: `${API_BASE_URL}`,
+        data: query,
+    });
+}
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/options.js b/src/views/goods/options.js
new file mode 100644
index 0000000..e58c9a4
--- /dev/null
+++ b/src/views/goods/options.js
@@ -0,0 +1,34 @@
+export const options = [
+  {
+    label: '标题图片',
+    props: 'carouselImage',
+    width: '200',
+    align: 'left'
+  },
+  {
+    label: '服务名称',
+    props: 'goodsName',
+    width: 'auto',
+    align: 'left'
+  },
+  {
+    label: '服务价格',
+    props: 'price',
+    width: '150',
+    align: 'left'
+  },
+  {
+    label: '服务说明',
+    props: 'details',
+    width: 'auto',
+    align: 'left',
+    show: true
+  },
+  {
+    label: '操作',
+    props: 'actions',
+    width: '150',
+    align: 'center',
+    fixed: 'right',
+  }
+]