From 52d3b79473df9c16cefcb0ee9b8505afb44e0dfc Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 2 Dec 2024 17:57:55 +0800
Subject: [PATCH] init

---
 src/api/site/site.js          |  37 +++
 src/main.js                   |   8 +
 src/views/banners/banners.vue | 514 ----------------------------------
 src/views/site/site.vue       | 312 +++++++++++++++++++++
 4 files changed, 357 insertions(+), 514 deletions(-)
 create mode 100644 src/api/site/site.js
 create mode 100644 src/views/site/site.vue

diff --git a/src/api/site/site.js b/src/api/site/site.js
new file mode 100644
index 0000000..e109943
--- /dev/null
+++ b/src/api/site/site.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/site/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/site/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/site/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/site/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/main.js b/src/main.js
index 2d7aa25..aeab4aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,6 +52,14 @@ Vue.use(avue)
 import AvueMap from 'avue-plugin-map'
 Vue.use(AvueMap);
 
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+Vue.use(VxeUI)
+Vue.use(VxeUITable)
+
 Vue.directive('loadMore', {
   bind(el, binding) {
     const selectWrap = el.querySelector('.el-scrollbar__wrap')
diff --git a/src/views/banners/banners.vue b/src/views/banners/banners.vue
index 0d68895..e69de29 100644
--- a/src/views/banners/banners.vue
+++ b/src/views/banners/banners.vue
@@ -1,514 +0,0 @@
-<template>
-  <div>
-    <!-- 查询配置 -->
-    <div>
-      <div ref="lxHeader">
-        <LxHeader
-          icon="md-apps"
-          :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
-        >
-          <div slot="content"></div>
-          <slot>
-            <header-content :auths="auths_auth_mixin">
-              <template #search>
-                <div style="display: flex">
-                  <Select
-                    v-model="select.filter[0].key"
-                    style="width: 100px"
-                    placeholder="搜索条目"
-                  >
-                    <Option
-                      v-for="item in form"
-                      :key="item.id"
-                      :value="item.field"
-                    >{{ item.name }}</Option
-                    >
-                  </Select>
-                  <Select
-                    v-model="select.filter[0].op"
-                    style="width: 100px; margin-left: 10px"
-                    placeholder="搜索条件"
-                  >
-                    <Option
-                      v-for="item in op"
-                      :key="item.value"
-                      :value="item.value"
-                    >{{ item.label }}</Option
-                    >
-                  </Select>
-                  <template
-                    v-if="
-                      select.filter[0].op !== 'range' &&
-                      !columnArrTest(select.filter[0].key)
-                    "
-                  >
-                    <Input
-                      v-model="select.filter[0].value"
-                      style="width: 150px; margin-left: 10px"
-                      placeholder="请填写关键词"
-                    />
-                  </template>
-                  <template
-                    v-else-if="
-                      select.filter[0].op !== 'range' &&
-                      columnArrTest(select.filter[0].key)
-                    "
-                  >
-                    <Select
-                      v-model="select.filter[0].value"
-                      style="width: 150px; margin-left: 10px"
-                      placeholder="请选择关键词"
-                    >
-                      <Option
-                        v-for="item in getColumnParams(select.filter[0].key)"
-                        :key="item.id"
-                        :value="getColumnField(select.filter[0].key)._relations ? item[getColumnField(select.filter[0].key)._relations.foreign_key] : item.value"
-                      >{{
-                          item.key || item.value || item.name || item.no || item.mingcheng || item.id
-                        }}</Option
-                      >
-                    </Select>
-                  </template>
-                  <template v-else>
-                    <Input
-                      :value="select.filter[0].value.split(',')[0]"
-                      style="width: 150px; margin-left: 10px"
-                      placeholder="范围开始关键词"
-                      @input="(e) => inputStartHandler(e, select.filter[0])"
-                    />
-                    <span
-                      style="
-                        margin-left: 10px;
-                        display: flex;
-                        align-items: center;
-                      "
-                    >至</span
-                    >
-                    <Input
-                      :value="select.filter[0].value.split(',')[1]"
-                      style="width: 150px; margin-left: 10px"
-                      placeholder="范围结束关键词"
-                      @input="(e) => inputEndHandler(e, select.filter[0])"
-                    />
-                  </template>
-                  <Button
-                    style="margin-left: 10px"
-                    type="primary"
-                    @click="$refs['xyTable'].getTableData(true)"
-                  >查询</Button
-                  >
-
-                  <xy-selectors
-                    style="margin-left: 10px"
-                    @reset="reset"
-                    @search="$refs['xyTable'].getTableData(true)"
-                  >
-                    <template>
-                      <div class="select">
-                        <div
-                          class="select__item"
-                          v-for="(item, index) in select.filter"
-                          :key="`${item.value}-${index}`"
-                        >
-                          <p>条件{{ index + 1 }}</p>
-                          <Select
-                            v-model="item.key"
-                            style="width: 100px"
-                            placeholder="搜索条目"
-                          >
-                            <Option
-                              v-for="item in form"
-                              :key="item.id"
-                              :value="item.field"
-                            >{{ item.name }}</Option
-                            >
-                          </Select>
-                          <Select
-                            v-model="item.op"
-                            style="width: 100px; margin-left: 10px"
-                            placeholder="搜索条件"
-                          >
-                            <Option
-                              v-for="item in op"
-                              :key="item.value"
-                              :value="item.value"
-                            >{{ item.label }}</Option
-                            >
-                          </Select>
-                          <template
-                            v-if="
-                              item.op !== 'range' && !columnArrTest(item.key)
-                            "
-                          >
-                            <Input
-                              v-model="item.value"
-                              style="width: 150px; margin-left: 10px"
-                              placeholder="请填写关键词"
-                            />
-                          </template>
-                          <template
-                            v-else-if="
-                              item.op !== 'range' && columnArrTest(item.key)
-                            "
-                          >
-                            <Select
-                              v-model="item.value"
-                              style="width: 150px; margin-left: 10px"
-                              placeholder="请选择关键词"
-                            >
-                              <Option
-                                v-for="item in getColumnParams(item.key)"
-                                :key="item.id"
-                                :value="getColumnField(item.key)._relations ? item[getColumnField(item.key)._relations.foreign_key] : item.value"
-                              >{{
-                                  item.key || item.value || item.name || item.no || item.mingcheng || item.id
-                                }}</Option
-                              >
-                            </Select>
-                          </template>
-                          <template v-else>
-                            <Input
-                              :value="item.value.split(',')[0]"
-                              style="width: 150px; margin-left: 10px"
-                              placeholder="范围开始关键词"
-                              @input="(e) => inputStartHandler(e, item)"
-                            />
-                            <span style="margin-left: 10px">至</span>
-                            <Input
-                              :value="item.value.split(',')[1]"
-                              style="width: 150px; margin-left: 10px"
-                              placeholder="范围结束关键词"
-                              @input="(e) => inputEndHandler(e, item)"
-                            />
-                          </template>
-                          <el-button
-                            v-if="index !== 0"
-                            size="small"
-                            type="danger"
-                            icon="el-icon-delete"
-                            circle
-                            style="margin-left: 10px"
-                            @click="select.filter.splice(index, 1)"
-                          ></el-button>
-                        </div>
-                      </div>
-                      <div class="add-btn">
-                        <el-button
-                          size="small"
-                          type="primary"
-                          icon="el-icon-plus"
-                          circle
-                          @click="
-                            select.filter.push({ key: '', op: '', value: '' })
-                          "
-                        ></el-button>
-                        <span>新增一条</span>
-                      </div>
-                    </template>
-                  </xy-selectors>
-                </div>
-              </template>
-              <template #create>
-                <Button
-                  type="primary"
-                  @click="
-                    $refs['dialog'].setType('add'), $refs['dialog'].show()
-                  "
-                >新增</Button
-                >
-              </template>
-              <template #import>
-                <Button type="primary" @click="$refs['imports'].show()"
-                >导入</Button
-                >
-              </template>
-              <template #export>
-                <Button
-                  type="primary"
-                  @click="exportExcel(new Date().getTime().toString())"
-                >导出</Button
-                >
-              </template>
-            </header-content>
-          </slot>
-        </LxHeader>
-      </div>
-    </div>
-    <!--$refs['drawer'].setId(row.id);
-              $refs['drawer'].show();-->
-    <xy-table
-      :auths="auths_auth_mixin"
-      :delay-req="true"
-      :destroy-action="destroy"
-      ref="xyTable"
-      :border="true"
-      :action="index"
-      :req-opt="tableSelect"
-      :destroy-req-opt="select"
-      :table-item="table"
-      @detail="
-        (row) => {
-          $router.push({
-            path: $route.path + '/detail/' + row.id
-          })
-        }
-      "
-      @editor="
-        (row) => {
-          $refs['dialog'].setId(row.id);
-          $refs['dialog'].setType('editor');
-          $refs['dialog'].show();
-        }
-      "
-    >
-    </xy-table>
-
-    <dialoger
-      :table-name="customForm.tableName"
-      :form-info="form"
-      ref="dialog"
-      @refresh="$refs['xyTable'].getTableData()"
-    >
-    </dialoger>
-    <drawer
-      :table-name="customForm.tableName"
-      :form-info="form"
-      ref="drawer"
-    ></drawer>
-    <imports
-      :table-name="customForm.tableName"
-      :form-info="form"
-      ref="imports"
-      @refresh="$refs['xyTable'].getTableData()"
-    ></imports>
-  </div>
-</template>
-
-<script>
-import { index as fieldIndex } from "@/api/system/customFormField";
-import { authMixin } from "@/mixin/authMixin";
-import { index, destroy } from "@/api/system/baseForm";
-import { op } from "@/const/op";
-import { download } from "@/utils/downloadRequest";
-import { getparameter } from "@/api/system/dictionary";
-import { show } from "@/api/system/customForm";
-import * as XLSX from "xlsx";
-import { saveAs } from "file-saver";
-import { listCommondepartment } from "@/api/common";
-import { getRenderTable, getForm } from "@/utils/table"
-
-import dialoger from "./dialog.vue";
-import LxHeader from "@/components/LxHeader/index.vue";
-import headerContent from "@/components/LxHeader/XyContent.vue";
-import drawer from "@/views/component/drawer.vue";
-import imports from "./imports.vue";
-export default {
-  components: {
-    LxHeader,
-    dialoger,
-    headerContent,
-    drawer,
-    imports,
-  },
-  mixins: [authMixin],
-  provide: {
-    formStore: () => this.form,
-  },
-  data() {
-    return {
-      op,
-      select: {
-        table_name: "",
-        filter: [
-          {
-            key: "",
-            op: "",
-            value: "",
-          },
-        ],
-      },
-      selectQuery: [],
-      form: [],
-      table: [],
-      customForm: {
-        customFormId: "",
-        tableName: "",
-      },
-    };
-  },
-  methods: {
-    index,
-    destroy,
-    download,
-    reset() {
-      this.select.filter.splice(1);
-      this.select.filter[0] = {
-        key: "",
-        op: "",
-        value: "",
-      };
-    },
-
-    async exportExcel(sheetName) {
-      const res = await index(
-        Object.assign(this.select, { page: 1, page_size: 9999 })
-      );
-      if (res.data) {
-        let headers = this.form.map((i) => {
-          return {
-            key: i.field,
-            title: i.name,
-          };
-        });
-        const data = res.data.map((row) =>
-          headers.map((header) => row[header.key])
-        );
-        data.unshift(headers.map((header) => header.title));
-        const wb = XLSX.utils.book_new();
-        const ws = XLSX.utils.aoa_to_sheet(data);
-        XLSX.utils.book_append_sheet(wb, ws, sheetName);
-        const wbout = XLSX.write(wb, {
-          bookType: "xlsx",
-          bookSST: true,
-          type: "array",
-        });
-        saveAs(
-          new Blob([wbout], { type: "application/octet-stream" }),
-          `${sheetName}.xlsx`
-        );
-      }
-    },
-
-    //target要为内存地址引用类型
-    inputStartHandler(e, target) {
-      let temp = target?.value.split(",")[1];
-      target.value = `${e},${temp ? temp : ""}`;
-    },
-    inputEndHandler(e, target) {
-      let temp = target?.value.split(",")[0];
-      target.value = `${temp ? temp : ""},${e}`;
-    },
-
-    async getFormDetail() {
-      if (this.$route.meta.params?.custom_form) {
-        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
-        try {
-          let custom_form = JSON.parse(decode);
-          this.customForm.customFormId = custom_form.custom_form_id;
-          this.customForm.tableName = custom_form.table_name;
-          this.select.table_name = custom_form.table_name;
-        } catch (err) {
-          console.warn(err);
-        }
-      }
-      if (this.$route.meta.params?.select) {
-        try {
-          this.selectQuery = JSON.parse(decodeURIComponent(this.$route.meta.params?.select));
-        } catch (err) {
-          console.warn(err);
-        }
-      }
-
-      const { fieldRes, selectItemMap } = await getForm(this.customForm.customFormId);
-      this.form = fieldRes;
-      this.table = getRenderTable(this, this.form);
-    },
-
-    adjustAlignment () {
-      if (this.firstAdjustTable) {
-        const data = this.$refs['xyTable'].getListData();
-        if (data.length < 2) return;
-        try {
-          this.form.filter(i => i.list_show).forEach((i) => {
-            let maxLength = -Infinity;
-            let minLength = Infinity;
-            let numberLength = 0;
-            let temp = 0;
-            while (temp < data.length) {
-              maxLength = Math.max(maxLength, data[temp][i.field]?.length??0);
-              minLength = Math.min(minLength, data[temp][i.field]?.length??0);
-              numberLength += /^-?[0-9]+(\.[0-9]+)?$/.test(data[temp][i.field]) ? 1 : 0;
-              temp++;
-            }
-            if (numberLength === temp) {
-              this.table.find(a => a.prop === i.field).align = 'right';
-            }
-            else if (Math.abs(maxLength - minLength) > 4) {
-              this.table.find(a => a.prop === i.field).align = 'left';
-            }
-          })
-          console.log(this.table)
-        } catch (e) {
-          console.error(e)
-        }
-        this.$nextTick(() => {
-          this.$refs['xyTable'].doLayout();
-          this.firstAdjustTable = false;
-        })
-      }
-    }
-  },
-
-  computed: {
-    columnArrTest() {
-      return function (field) {
-        return this.form.find((i) => i.field === field)
-          ? this.form.find((i) => i.field === field).search_input === "checkbox" || this.form.find((i) => i.field === field).search_input === "radio"
-          : false;
-      };
-    },
-    getColumnField() {
-      return function (field) {
-        return this.form.find((i) => i.field === field)
-          ? this.form.find((i) => i.field === field)
-          : {};
-      };
-    },
-    getColumnParams() {
-      return function (field) {
-        return this.form.find((i) => i.field === field)
-          ? this.form.find((i) => i.field === field)._params
-          : [];
-      };
-    },
-
-    tableSelect () {
-      let filter = [...this.select.filter,...this.selectQuery]
-      return {
-        ...this.select,
-        filter
-      }
-    }
-  },
-  created() {
-    this.getFormDetail();
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.select {
-  &__item {
-    & > p {
-      display: inline-block;
-      width: 80px;
-      text-align: center;
-    }
-
-    & + div {
-      margin-top: 6px;
-    }
-  }
-}
-.add-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  margin-top: 10px;
-  & > span {
-    padding: 0 10px;
-  }
-}
-</style>
diff --git a/src/views/site/site.vue b/src/views/site/site.vue
new file mode 100644
index 0000000..e47a4cb
--- /dev/null
+++ b/src/views/site/site.vue
@@ -0,0 +1,312 @@
+<template>
+    <div>
+        <vxe-toolbar export print ref="toolbar">
+            <template #buttons>
+                <el-button
+                        icon="el-icon-plus"
+                        type="primary"
+                        size="small"
+                        @click="isShowAdd = true"
+                >新增</el-button
+                >
+                <el-button
+                        icon="el-icon-search"
+                        type="primary"
+                        plain
+                        size="small"
+                        @click="getList"
+                >搜索</el-button
+                >
+            </template>
+        </vxe-toolbar>
+        <vxe-table
+                ref="table"
+                stripe
+                style="margin-top: 10px"
+                :loading="loading"
+                keep-source
+                show-overflow
+                :column-config="{ resizable: true }"
+                :edit-rules="validRules"
+                :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          isHover: true,
+          autoClear: false,
+        }"
+                :align="allAlign"
+                :data="tableData"
+        >
+            <vxe-column type="seq" width="58" align="center" />
+
+
+
+
+                    <vxe-column
+                            field="name"
+                            width="160"
+                            title="名称"
+                            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                    />
+
+
+
+
+                    <vxe-column
+                            field="status"
+                            width="140"
+                            title="状态"
+                            :edit-render="{ name: 'VxeSelect', options: [{ name: '是', value: 1 },{ name: '否', value: 0 }] }"
+                    />
+
+
+
+
+                    <vxe-column
+                            field="content"
+                            width="160"
+                            title="内容"
+                            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                    />
+
+
+
+
+                    <vxe-column
+                            field="sort"
+                            width="160"
+                            title="排序"
+                            :edit-render="{ name: 'input', attrs: { type: 'number' } }"
+                    />
+
+            <vxe-column field="operate" title="操作" min-width="220">
+                <template #default="{ row }">
+                    <template v-if="isActiveStatus(row)">
+                        <el-button size="small" type="primary" @click="saveRowEvent(row)"
+                        >保存</el-button
+                        >
+                        <el-button
+                                size="small"
+                                type="primary"
+                                plain
+                                @click="cancelRowEvent(row)"
+                        >取消</el-button
+                        >
+                    </template>
+                    <template v-else>
+                        <el-button size="small" type="warning" @click="editRowEvent(row)"
+                        >编辑</el-button
+                        >
+                        <el-button
+                                size="small"
+                                type="danger"
+                                @click="destroyRowEvent(row)"
+                        >删除</el-button
+                        >
+                    </template>
+                </template>
+            </vxe-column>
+        </vxe-table>
+
+        <el-pagination
+                style="margin-top: 10px"
+                :current-page.sync="select.page"
+                :page-sizes="[20, 30, 40, 50]"
+                :page-size.sync="select.page_size"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                @size-change="
+          (e) => {
+            select.page_size = e;
+            select.page = 1;
+            getList();
+          }
+        "
+                @current-change="
+          (e) => {
+            select.page = e;
+            getList();
+          }
+        "
+        />
+<!--        <AddSite-->
+<!--                ref="AddSite"-->
+<!--                :rooms="rooms"-->
+<!--                :is-show.sync="isShowAdd"-->
+<!--                @refresh="getList"-->
+<!--        />-->
+    </div>
+</template>
+
+<script>
+  import { deepCopy } from "@/utils";
+  import { destroy, index, save } from "@/api/site/site";
+  // import AddMeeting from "./components/AddSite.vue";
+  import axios from "axios";
+  import { getToken } from "@/utils/auth";
+
+  export default {
+    components: {
+      //AddMeeting
+    },
+    data() {
+      return {
+        examineKey: 0,
+        isShowAdd: false,
+
+        loading: false,
+        select: {
+          page: 1,
+          page_size: 20,
+          keyword: ''
+        },
+        total: 0,
+        allAlign: null,
+        tableData: [],
+        validRules: {},
+        form: {
+
+            name: "",
+
+            status: "",
+
+            content: "",
+
+            sort: 0,
+
+        },
+      };
+    },
+    computed: {
+      isActiveStatus() {
+        return function (row) {
+          if (this.$refs["table"]) {
+            return this.$refs["table"].isEditByRow(row);
+          }
+        };
+      },
+    },
+    created() {
+      this.getList();
+    },
+    mounted() {
+      this.bindToolbar()
+    },
+    methods: {
+      uploadMethod(file, row, fieldName) {
+        const formData = new FormData()
+        formData.append('file', file)
+        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`,
+          }
+        }).then((response) => {
+          if (response.status === 200 && !response.data.code) {
+            if (!(this.form[fieldName] instanceof Array)) {
+              this.form[fieldName] = []
+            }
+            this.form[fieldName].push({
+              response: response.data.data,
+              name: response.data.data.original_name,
+              url: response.data.data.url
+            })
+          } else {
+            this.$message.error("上传失败")
+          }
+        })
+      },
+      bindToolbar() {
+        this.$nextTick(() => {
+          if (this.$refs["table"] && this.$refs["toolbar"]) {
+            this.$refs["table"].connect(this.$refs["toolbar"]);
+          }
+        });
+      },
+
+      editRowEvent(row) {
+        if (this.$refs["table"]) {
+          this.$refs["table"].setEditRow(row);
+        }
+      },
+      cancelRowEvent(row) {
+        if (this.$refs["table"]) {
+          this.$refs["table"].clearEdit().then(() => {
+            // 还原行数据
+            this.$refs["table"].revertData(row);
+          });
+        }
+      },
+
+      async getList() {
+        this.loading = true;
+        try {
+          const res = await index(this.select);
+          this.tableData = res.data;
+          this.total = res.total;
+          this.loading = false;
+        } catch (err) {
+          console.error(err);
+          this.loading = false;
+        }
+      },
+
+      async saveRowEvent(row) {
+        try {
+          const errMap = await this.$refs["table"].validate();
+          if (errMap) {
+            throw new Error(errMap);
+          }
+          await this.$confirm("确认保存？", "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+          });
+          await this.$refs["table"].clearEdit();
+          const form = deepCopy(this.form);
+          for (const key in form) {
+            form[key] = row[key];
+          }
+          this.loading = true;
+          // TODO: 如果有附件初始值赋值一下
+          await save(form);
+          await this.getList();
+          this.loading = false;
+        } catch (err) {
+          this.loading = false;
+        }
+      },
+      async destroyRowEvent(row) {
+        try {
+          await this.$confirm("确认删除？", "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+          });
+          this.loading = true;
+          if (row.id) {
+            await destroy({
+              id: row.id,
+            });
+            await this.getList();
+          } else {
+            console.log(row);
+            this.tableData.splice(
+              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+              1
+            );
+          }
+          this.loading = false;
+        } catch (err) {
+          this.loading = false;
+        }
+      },
+
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+
+  ::v-deep .el-tag + .el-tag {
+    margin-left: 4px;
+  }
+</style>