elmentUi 二次封装

Description

关于 pc 管理系统通体组件的抽离封装，分别为搜索查询，表格分页查询组件 依赖 elment-ui，vue

Software Architecture

vue2,elment-ui

Installation

1. npm i vue-mangyu-ui
2. 在 mian.js 引入注册 import vueMangyuUi from 'vue-mangyu-ui' Vue.use(vueMangyuUi)
3. 创建 houseInfo.vue

    <template>
      <div class="houseInfo">
        <div style="background-color: white">
          <base-search :formItemList="formItemList" @search="searchFrom">
          </base-search>

          <table-custom
            :data="tableData"
            :header="dailyHeader"
            :settings="tableSettings"
            @currentPage="currentPage"
            @pageSize="pageSize"
            style="margin-top: 20px"
          >
            <!-- //自定义操作列插槽 -->
            <template slot="xiaoquzhuangtai">
              <el-table-column prop="xiaoquzhuangtai" label="校区状态">
                <template slot-scope="scope">
                  <div><img src="kkk" />{{ scope.row.xiaoquzhuangtai }}</div>
                </template>
              </el-table-column>
            </template>
            <template slot="action">
              <el-table-column
                label="操作"
                align="left"
                width="120px"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="handleshow(scope.row, 'edit')"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="handleshow(scope.row, 'del')"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </table-custom>

        </div>

      </div>
    </template>
    <script>
    // import tableCustom from "@/components/common/tableCustom/index.vue";
    // import baseSearch from "@/components/common/searchCustom/index.vue";
    import { tableTile, floorHeader } from "./tableTitle";
    export default {
    //   components: { tableCustom, baseSearch },
      name: "houseInfo",
      data() {
        return {
     
          formItemList: [
            //搜索条件
            {
              label: "楼宇名称",
              type: "input",
              param: "company1",
            },
            {
              label: "所属校区",
              type: "select",
              selectOptions: [{ text: "全部", value: "全部" }],
              param: "company11",
            },
            {
              label: "楼宇状态",
              type: "select",
              selectOptions: [{ text: "全部", value: "全部" }],
              param: "company22",
            },
          ],
          tableSettings: {
            isPagination: false,
            isLoading: false,
            total: 0,
            isIndex: false,
            isBorder: false,
            height: 500,
          },
          loadingBottom: false,
          dailyHeader: tableTile,
          floorHeader: floorHeader,

          tableData: {
            list: [
              {
                xiaoqumingcheng: "校区",
                louyudaima: "20230908",
                xiaoquzhuangtai: "1",
              },
            ],
          },
          obj: {
            pageNum: 1,
            pageSize: 20,
          },
          //弹框 start
          dialogVisible: false,
          titles: "新增",
          formObj: {
            louyudaima: "",
            xianshipaixu: "",
            xiaoqumingcheng: "",
            xiaoquzhuangtai: "0",
            louyumingcheng: "",
            dishang: 0,
            dixia: 0,
            floorList: {
              list: [],
            },
          },
          dixiaList: [],
          dixiaList: [],

          // 弹框   end
        };

    },
    created() {},
    mounted() {},
    methods: {
    handleAdd() {
    this.titles = "新增";
    this.dialogVisible = true;
    this.$refs.buildingFormRef && this.$refs.buildingFormRef.resetFields();
    },
    //搜索
    searchFrom(res) {
    console.log(res, "搜索");
    },
    inittable() {
    this.$axiosApi.personApi
            .getFirmPersonList({ ...this.searchData, ...this.obj })
            .then((res) => {
                if (res && res.data) {
                    this.$set(this.tableData, 'list', res.data.records);
    this.obj = {
    pageNum: res.data.current,
    pageSize: res.data.size
    };
    this.tableSettings.total = res.data.total ? Number(res.data.total) : 0;
    }
    })
    .catch(() => {});
    },
    currentPage(page) {
    this.obj.pageNum = page;
    this.inittable();
    },
    pageSize(size) {
    this.obj.pageSize = size;
    this.inittable();
    },
    //列表操作
    handleshow(row, type) {
    if (type === "edit") {
    this.titles = "编辑";
    this.dialogVisible = true;
    }
    if (type === "del") {
    }
    },
    },
    };
    </script>

<style lang="scss" scoped>
.houseInfo {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px 20px 20px 20px;
  .application-box {
    margin-top: 16px;
    //巡逻迭代图
    .right-area {
      height: 400px;
      position: relative;
    }
  }
  //标题
  .top-title {
    margin-bottom: 16px;
    font-size: 20px;
    font-family: RZRXNFHJ;
    font-weight: 500;
    color: #1f2329;
  }

  .dialog-d1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .dialog-d1-l {
    width: 50%;
    /deep/.div-el-input,
    .el-textarea {
      width: 70%;
    }
    /deep/.el-select {
      width: 70%;
    }
    /deep/.el-input-number {
      width: 70%;
    }
  }
  .btn-search {
    width: auto;
  }
}
</style>

3. 创建 tableTitle.js

   export const tableTile = [
   {
   prop: 'xiaoqudaima',
   label: '楼宇代码'
   },
   {
   prop: 'xiaoqumingcheng',
   label: '楼宇名称'
   },
   {
   prop: '所属校区',
   label: '楼宇名称'
   },
   {
   prop: 'xiaoquzhuangtai',
   label: '校区状态',
   columned: true
   }
   ];
   export const floorHeader = [
   {
   prop: 'floor',
   label: '楼宇名称',
   columned: true
   },
   ];

Instructions

1. xxxx
2. xxxx
3. xxxx

Contribution

1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request

Gitee Feature

1. You can use Readme_XXX.md to support different languages, such as Readme_en.md, Readme_zh.md
2. Gitee blog blog.gitee.com
3. Explore open source project https://gitee.com/explore
4. The most valuable open source project GVP
5. The manual of Gitee https://gitee.com/help
6. The most popular members https://gitee.com/gitee-stars/