所有页面搜索栏左侧对齐

guanqb

2024-01-29 bf45ce8559383eb2c940affc6296c4c156ecf5e2

 src/views/article/articleComment.vue

@@ -1,187 +1,208 @@
<template>
  <basicContainer>
    <avue-crud :data="dataList" ref="crud" :table-loading="loading" @current-change="currentChange"
      @search-change="searchChange" @search-reset="searchReset" @size-change="sizeChange" :option="option"
      v-model="data" :page="page" @selection-change="selectionChange" @row-del="rowDel" @refresh-change="refreshChange"
      @on-load="onLoad">
      <template slot="menuLeft">
        <!-- <el-button size="small" icon="el-icon-delete" plain v-if="permission.article_delete" @click="handleDelete">删 除
    <basicContainer>
        <avue-crud :data="dataList" ref="crud" :table-loading="loading" @current-change="currentChange"
            @search-change="searchChange" @search-reset="searchReset" @size-change="sizeChange" :option="option"
            v-model="data" :page="page" @selection-change="selectionChange" @row-del="rowDel"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <!-- <el-button size="small" icon="el-icon-delete" plain v-if="permission.article_delete" @click="handleDelete">删 除
        </el-button> -->
        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.user_delete"
          @click="handleDelete">批量删除
        </el-button>
      </template>
    </avue-crud>
  </basicContainer>
                <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.user_delete"
                    @click="handleDelete">批量删除
                </el-button>
            </template>
        </avue-crud>
    </basicContainer>
</template>
<script>
  import {
    getList,
import {
    getPageList,
    remove,
    update,
    add,
    getNotice,
    upcomment
  } from "@/api/article/articleComment";
  import {
} from "@/api/article/articleComment"
import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        page: {
          pageSize: 10,
          pageSizes: [10, 20, 30, 50, 100],
          currentPage: 1,
          total: 0
        },
        dataList: [],
        loading: true,
        selectionList: [],
        option: {
          selection: true,
          height: "auto",
          calcHeight: 54,
          align: 'center',
          menuAlign: 'center',
          addBtn: false,
          editBtn: false,
          searchMenuSpan: 3,
          searchBtn: true,
          column: [{
              label: '头像',
              prop: 'avatar',
              dataType: 'string',
              type: 'img',
} from "vuex"

import website from '@/config/website'

export default {
    data () {
        return {
            page: {
                pageSize: 10,
                pageSizes: [10, 20, 30, 50, 100],
                currentPage: 1,
                total: 0
            },
            {
              label: '电话',
              prop: 'phone',
              searchSpan: 4,
              search: true,
            },
            {
              label: '昵称',
              prop: 'name',
              searchSpan: 4,
              search: true,
            },
            {
              label: '标题',
              prop: 'title',
              searchSpan: 4,
              search: true,
            },
            {
              label: '评论',
              prop: 'content'
            dataList: [],
            loading: true,
            selectionList: [],
            option: {
                labelWidth: 96,
                searchLabelWidth: 66,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 80,

                selection: true,
                height: "auto",
                calcHeight: 54,
                align: 'center',
                menuAlign: 'center',
                addBtn: false,
                editBtn: false,
                searchBtn: true,
                column: [
                    {
                        width: 110,
                        label: '头像',
                        prop: 'avatar',
                        dataType: 'string',
                        type: 'img',
                    },
                    {
                        width: 120,
                        label: '电话',
                        prop: 'phone',
                        searchSpan: 4,
                        search: true,
                        searchLabelWidth: 46,
                    },
                    {
                        width: 110,
                        label: '昵称',
                        prop: 'name',
                        searchSpan: 4,
                        search: true,
                    },
                    {
                        label: '标题',
                        prop: 'title',
                        searchSpan: 4,
                        search: true,
                    },
                    {
                        label: '评论',
                        prop: 'content'
                    }
                ]
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(["permission", "userInfo"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.article_add, true),
          viewBtn: this.vaildData(this.permission.article_view, true),
          delBtn: this.vaildData(this.permission.article_delete, true),
          editBtn: this.vaildData(this.permission.article_edit, true),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
        ...mapGetters(["permission", "userInfo"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.article_add, true),
                viewBtn: this.vaildData(this.permission.article_view, true),
                delBtn: this.vaildData(this.permission.article_delete, true),
                editBtn: this.vaildData(this.permission.article_edit, true),
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    methods: {
      selectionChange(list) {
        this.selectionList = list;
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$refs.crud.toggleSelection();
          });
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      currentChange(currentPage) {
        console.log(currentPage)
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        console.log(pageSize)
        this.page.pageSize = pageSize;
      },
      onLoad(page, params = {}) {
        let values = {
          ...params,
        };
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.dataList = data.records;
          this.loading = false;
          // this.selectionClear();
        });
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
        selectionChange (list) {
            this.selectionList = list
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        currentChange (currentPage) {
            console.log(currentPage)
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            console.log(pageSize)
            this.page.pageSize = pageSize
        },
        onLoad (page, params = {}) {
            let values = {
                ...params,
            }
            this.loading = true
            getPageList(page.currentPage, page.pageSize, values).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.dataList = data.records
                this.dataList.forEach(item => {
                    if (item.avatar) {
                        // var urls = []
                        // var names = item.avatar.split(",")
                        // names.forEach(name => {
                        //   urls.push(website.minioUrl + name)
                        // })
                        item.avatar = website.minioUrl + item.avatar
                    }
                })
                this.loading = false
            })
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
    }
  }
}
</script>

<style>
</style>
<style></style>