对接口：

1、登录接口 2、菜单接口改模拟 3、服务项目管理(头像上传及删除未实现)
2024-10-11 16:34:59 +08:00
parent 1851d57f7f
commit d099a26534
7 changed files with 359 additions and 5 deletions
@@ -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,
+    });
+}
@@ -19,6 +19,7 @@ const service = axios.create({
 // Request interceptors
 service.interceptors.request.use(
    (config) => {
+
        if (localStorage.getItem("token")) {
            config.headers["Authorization"] =
                "Bearer " + localStorage.getItem("token");
@@ -10,6 +10,11 @@ const menuTable = [
    url: "/home",
    icon: "HomeFilled",
  },
+  {
+    title: "服务项目",
+    url: "/goods",
+    icon: "HomeFilled",
+  },
  {
    title: "页面管理",
    url: "/page",
@@ -90,7 +90,7 @@ const routerList = [
        component: () => import("../views/goods/index.vue"),
        meta: {
          requiresAuth: true, //有一些页面是否登录才能进去
-          name: "项目列表",
+          name: "服务项目",
        },
      },
    ],
@@ -63,8 +63,9 @@ export default {
      return new Promise((resolve, reject) => {
        LoginInfo(userInfo)
          .then((res) => {
-            console.log(res.data.data);
+            console.log(res.data.token, "111");
            sessionStorage.setItem("token", res.data.token);
+            localStorage.setItem("token", res.data.token);
            sessionStorage.setItem("UserInfo", JSON.stringify(res.data));
            commit("setToken", res.data.token);
            commit("setUserInfo", res.data);
@@ -1,10 +1,298 @@
 <template>
-  <el-card>
-    <div>服务项目管理222</div>
+  <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-form>
+      <div class="flex-right">
+        <el-button type="primary" :icon="Search" @click="initData" class="ml20"
+          >搜索</el-button
+        >
+        <el-button type="primary" @click="dialogVisibleShow">+添加</el-button>
+      </div>
+    </div>
  </el-card>
+  <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="goodsName"
+      >
+        <el-input v-model="dialogData.FormData.goodsName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="服务价格" :label-width="formLabelWidth" prop="price">
+        <el-input v-model="dialogData.FormData.price" autocomplete="off" />
+      </el-form-item>
+
+      <el-form-item label="标题图片" :label-width="formLabelWidth" prop="carouselImage">
+        <el-input v-model="dialogData.FormData.carouselImage" type="textarea" />
+      </el-form-item>
+      <el-form-item label="服务说明" :label-width="formLabelWidth" prop="details">
+        <el-input v-model="dialogData.FormData.details" type="textarea" />
+      </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 {
+  getGoodsList,
+  addGoods,
+  updateGoods,
+} from '../../api/modules/goods.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: {
+    id: 1,
+    goodsName: '',
+    price: '',
+    carouselImage: '',
+    details: '',
+  },
+})
+
+const dialogWidth = ref('0')
+const rules = reactive({
+  goodsName: [{ required: true, message: '请填写服务项目姓名', trigger: 'change' }],
+  price: [{ required: true, message: '请填写价格', trigger: 'change' }],
+  carouselImage: [{ required: true, message: '请填写服务说明', trigger: 'change' }],
+  details: [{ required: true, message: '请填写说明信息', trigger: 'change' }],
+})
+const oldTableData = ref([])
+const dialogVisible = ref(false)
+const tableData = ref([])
+const total = ref(0)
+
+const initData = () => {
+  getGoodsList(queryData.value).then((res) => {
+    total.value = res.total
+    tableData.value = res.data
+  })
+}
+
+const dialogVisibleShow = () => {
+  dialogData.FormData = {
+    goodsName: '',
+    price: '',
+    carouselImage: '',
+    details: '',
+  }
+  dialogVisible.value = true
+}
+const onSubmit = () => {
+  FormRef.value.validate(async (valid) => {
+    if (!valid) return
+    try {
+      if (dialogData.FormData.id) {
+        updateGoods(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></style>
+<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>
@@ -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',
+  }
+]