yikangyang-web/src/views/site/site.vue

<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>