middleground_code_v2/src/components/base/baseLayout/index.vue

<!--
* @name: 页面基本结构组件
* @author: zhangpengcheng
* @date: 2022-08-23
-->
<!-- style="overflow: auto;" -->
<template>
  <div
    class="container"
    v-loading="loading"
    :style="
      'backgroundColor:' +
      bgColor +
      ';paddingBottom:' +
      paddingBottom +
      ';height:' +
      bodyHight
    "
  >
    <!-- 标题       -->
    <div class="title" flex="cross:center" v-if="showTitle">
      <span v-if="!$route.meta.back">{{ title }}</span>
      <span @click="goBack" class="back" v-else
      ><i class="el-icon-arrow-left"></i>返回</span
      >
    </div>

    <!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
    <div
      class="main"
      :style="{
        height: showTitle ? 'calc(100% - 38px)' : '100%',
        backgroundColor: mainColor,
      }"
    >
      <!-- 操作按钮 -->
      <div
        class="pushButton"
        flex="cross:centet main:right cross:center"
        v-if="operateButtonSwitch"
      >
        <div class="operationButton" flex="cross:center">
          <div v-if="defaultButtonSwitch" style="margin-right: 5px">
            <el-button
              v-for="(item, index) in defaultButtonList"
              :type="item.type ? item.type : 'primary'"
              size="small"
              class="iconfont buttonList"
              :icon="item.icon"
              @click="funNewClick(item)"
              :key="index"
            >
              {{ item.menuName }}
            </el-button>
          </div>
          <slot name="btn"></slot>
          <el-button
            v-for="(item, index) in buttonList"
            :type="item.type ? item.type : 'primary'"
            size="small"
            class="iconfont buttonList"
            :icon="item.icon"
            @click="funNewClick(item)"
            :key="index"
          >
            <span v-if="item.menuName">{{ item.menuName }}</span>
          </el-button>
        </div>
        <div v-if="fixedButton" style="margin-left: 5px">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.title"
            placement="top"
            v-for="(item, index) in fixedButtonList"
            :key="index"
            trigger="hover"
          >
            <span>
              <el-button
                size="mini"
                :icon="item.icon"
                @click.stop="fixedClick(item)"
                style="margin: 0"
              ></el-button>
            </span>
          </el-tooltip>
        </div>
      </div>
      <!-- 搜索 -->
      <div
        v-show="querySwitch"
        style="padding: 5px; background-color: #fff"
        flex="cross:center"
        ref="serchRefs"
        class="searchForTable"
      >
        <div
          v-for="(row, indexRow) in searchList"
          class="searchBox"
          :key="indexRow"
          style="margin-right: 5px"
        >
          <el-input
            v-model="ruleForm[row.columnNameEN]"
            clearable
            :type="row.type ? row.type : 'text'"
            style="width: 100%"
            :placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
            v-if="row.tag === 'elInput'"
            min="1"
            @keydown.enter.native="handerInputEnter()"
          >
          </el-input>
          <el-date-picker
            v-model="ruleForm[row.columnNameEN]"
            v-if="row.tag === 'elDatePicker'"
            :class="{ one: row.type ? 'date' : row.type }"
            style="width: 100%"
            :value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :type="!row.type ? 'date' : row.type"
            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
          >
          </el-date-picker>
          <el-radio-group
            v-model="ruleForm[row.columnNameEN]"
            v-if="row.tag === 'elRadio'"
          >
            <el-radio-button
              v-for="el in row.options"
              :label="el.value"
              :key="el.value"
            >{{ el.label }}
            </el-radio-button>
          </el-radio-group>
          <div
            v-if="row.tag === 'elDialog'"
            class="elDialog"
            style="cursor: pointer; height: 32px; ine-height: 32px"
          >
            <p
              :style="{
                color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
              }"
              style="width: 100%; margin: 0"
              @click="elDialogClick(row, index, indexRow)"
            >
              {{
                ruleForm[row.columnNameEN]
                  ? ruleForm[row.columnNameEN]
                  : row.columnNameCN
                    ? row.columnNameCN
                    : "请点击选择"
              }}
            </p>
            <i
              class="el-icon-more"
              @click="elDialogClick(row, index, indexRow)"
              v-if="!row.disabled && !ruleForm[row.columnNameEN]"
            ></i>
            <i
              class="el-icon-circle-close"
              v-if="!row.disabled && ruleForm[row.columnNameEN]"
              @click="elDialogClear(row)"
              style="margin-left: 10px"
            ></i>
          </div>
          <el-select
            v-model="ruleForm[row.columnNameEN]"
            filterable
            style="width: 100%"
            @change="selectChange($event, indexRow)"
            :clearable="row.clearable ? row.clearable : true"
            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
            v-if="row.tag === 'elSelect'"
          >
            <el-option
              v-for="(el, elIndex) in row.options"
              :key="!row.optionValue ? el['value'] : el[row.optionValue]"
              :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
              :value="!row.optionValue ? el['value'] : el[row.optionValue]"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 搜索按钮 -->
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search searchIcon"
          @click="search"
          title="搜索"
        >
          搜索
        </el-button>
        <el-button
          v-if="searchList.length > 1"
          type="primary"
          size="small"
          icon="el-icon-refresh-left searchIcon"
          class="searchIcon"
          @click="refresh"
          title="重置"
        >重置
        </el-button>
        <slot name="searchBtn"></slot>
      </div>
      <div :style="'height:' + getMainHeight()" class="tableHeight">
        <slot name="main" :tableHeight="tableHeight"></slot>
      </div>
      <!-- 主要内容  -->
      <!-- 分页 -->
      <base-page
        v-if="isPage"
        :pageModel.sync="pageModel"
        @onPageChange="onPageChange"
      ></base-page>
    </div>
  </div>
</template>

<script>
// import heightTransition from '@/common/js/heightTransition'
// import customCascader from "@/components/customCascader";
import { exportDown, wordDown, zipDown } from "@/utils/util.js";
import basePage from "@/components/base/basePage";
import { TokenKeys } from "@/utils/variable";
// import fetch from '../../api/request'
import { getApiSign } from "@/utils/apiSign";
// import domainsFuc from '@/api/domains.js'
export default {
  components: {
    // heightTransition,
    basePage,
    // customCascader
  },
  props: {
    // 是否展示标题
    showTitle: {
      type: Boolean,
      default: true,
    },

    // 标题
    title: {
      type: String,
      default: "",
    },

    // 背景颜色
    bgColor: {
      type: String,
      default: "#ffffff",
    },
    // 背景颜色
    mainColor: {
      type: String,
      default: "",
    },
    // 底部padding
    paddingBottom: {
      type: String,
      // default: '68px'
    },
    // 高度
    bodyHight: {
      type: [Number, String],
      default: "100%",
    },
    // main高度
    mainHight: {
      type: [Number, String, Boolean],
      default: "calc(100% - 38px)",
    },
    // 搜索配置
    searchModel: {
      type: Array,
      default: () => {
        return [];
      },
    },

    // 按钮配置
    buttonList: {
      type: Array,
      default: () => {
        return [];
        // [{
        // 	icon: 'el-icon-plus',
        // 	menuName: '新增'
        // }, {
        // 	icon: 'el-icon-edit',
        // 	menuName: '编辑'
        // }, {
        // 	icon: 'el-icon-delete',
        // 	menuName: '删除',
        // 	type: 'danger'
        // }, {
        // 	icon: 'el-icon-refresh',
        // 	menuName: '刷新'
        // },]
      },
    },
    defaultButtonList: {
      type: Array,
      default: () => {
        return [
          {
            icon: "el-icon-plus",
            menuName: "新增",
          },
          {
            icon: "el-icon-edit",
            menuName: "编辑",
          },
          {
            icon: "el-icon-delete",
            menuName: "删除",
            type: "danger",
          },
          // {
          // 	icon: 'el-icon-refresh',
          // 	menuName: '刷新'
          // },
        ];
      },
    },
    // 是否展示分页
    isPage: {
      type: Boolean,
      default: false,
    },
    // 导出接口地址
    exportUrl: {
      default: "",
    },
    // 导入接口地址
    importUrl: {
      default: "",
    },
    //单选
    only: {
      default: "",
    },
    // 左侧固定按钮
    fixedButton: {
      type: Boolean,
      default: false,
    },
    // 是否显示查询条件
    querySwitch: {
      type: Boolean,
      default: false,
    },
    // 搜索列表
    searchList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 操作按钮
    operateButtonSwitch: {
      type: Boolean,
      default: true,
    },
    // 操作按钮
    defaultButtonSwitch: {
      type: Boolean,
      default: true,
    },
    // 右侧按钮
    fixedButtonList: {
      type: Array,
      default: () => {
        return [
          {
            icon: "el-icon-s-operation",
            title: "筛选",
          },
          {
            icon: "el-icon-printer",
            title: "打印",
          },
          {
            icon: "el-icon-folder",
            title: "导出",
          },
        ];
      },
    },
  },
  data() {
    return {
      ruleForm: {},
      onlyUrl: "",
      clientHeight: "",
      // 上传请求头
      uploadHeaders: {},
      // uurl: domainsFuc().domain,
      uurl: "http://www.wldxt.cn:8089/taizhou/daxitong/crm/",
      // 参数
      model: {},
      // 收起/展开搜索
      isSearch: false,
      // 分页数据
      pageModel: {
        total: 0,
        page: 1,
        limit: 20,
      },
      // 清除状态
      clearState: 0,
      loading: false,
      // fixedButtonList: [{
      // 	icon: 'el-icon-s-operation',
      // 	title: '筛选'
      // },
      // {
      // 	icon: 'el-icon-printer',
      // 	title: '打印'
      // },
      // {
      // 	icon: 'el-icon-folder',
      // 	title: '导出'
      // }
      // ],
      // defaultButtonList: [
      // 	{
      // 		icon: 'el-icon-plus',
      // 		menuName: '新增'
      // 	}, {
      // 		icon: 'el-icon-edit',
      // 		menuName: '编辑'
      // 	}, {
      // 		icon: 'el-icon-delete',
      // 		menuName: '删除',
      // 		type: 'danger'
      // 	}, {
      // 		icon: 'el-icon-refresh',
      // 		menuName: '刷新'
      // 	},
      // ],
      tableHeight: "100%",
    };
  },
  created() {},
  mounted() {
    // this.getTableHight()
    // window.onresize = () => {
    // 	this.clientHeight = document.documentElement.clientHeight;
    // },
    // this.importUpload(); //初始化上传
  },
  computed: {
    // menuJson() {
    // 	return JSON.parse(localStorage.getItem(TokenKeys.MENU_JSON))
    // }
  },
  methods: {
    getTableHight() {
      let height = "100%";
      let heightReduce = 0;
      if (this.operateButtonSwitch) {
        heightReduce = heightReduce + 53;
      }
      if (this.querySwitch) {
        heightReduce = heightReduce + 47;
      }
      if (this.isPage) {
        heightReduce = heightReduce + 53;
      }
      height = "calc(100% - " + heightReduce + "px)";
      this.tableHeight = height;
    },
    getMainHeight() {
      // operateButtonSwitch 操作开关 querySwitch查询高 度
      let height = "100%";
      let heightReduce = 0;
      if (this.operateButtonSwitch) {
        heightReduce = heightReduce + 56;
      }
      if (this.querySwitch) {
        heightReduce = heightReduce + 33;
      }
      if (this.isPage) {
        heightReduce = heightReduce + 56;
      }
      height = "calc(100% - " + heightReduce + "px)";
      // console.log(height, "height")
      return height;
    },
    pageClear() {
      this.pageModel.page = 1;
    },
    // importUpload() {
    // 	const timestamp = new Date().getTime() + '';
    // 	const sign = getApiSign(timestamp);
    // 	this.uploadHeaders['timestamp'] = timestamp;
    // 	this.uploadHeaders['appKey'] = TokenKeys.APP_KEY;
    // 	this.uploadHeaders['sign'] = sign;
    // 	this.uploadHeaders[TokenKeys.ACCESS_TOKEN] = localStorage.getItem(TokenKeys.ACCESS_TOKEN);
    // },
    handleSuccess(res) {
      const { code, msg, data } = res;
      if (code && code == 10000) {
        this.loading = false;
        this.$vmNews("上传成功", "success");
      } else {
        this.$vmNews(msg);
        this.loading = false;
      }
    },
    handleProgress() {
      this.loading = true;
    },
    handleError() {
      this.$vmNews("上传失败", "error");
    },
    // 自定义级联选择器返回值
    getCascader(value, field) {
      this.$set(this.model, field, value);
    },
    // 设置分页total值
    setPageTotal(total) {
      this.$set(this.pageModel, "total", total);
    },
    setPageNum(pageNum) {
      this.$set(this.pageModel, "page", pageNum);
    },
    //参数propLabel ， 值value
    getField(propLabel, value) {
      this.$set(this.ruleForm, propLabel, value);
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 按钮点击事件
    funNewClick(item) {
      if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
        this.$tab.refreshPage(this.$route);
      } else {
        this.$emit("onFuncBtn", item);
      }
    },
    // 固定按钮点击事件
    fixedClick(item) {
      this.$emit("onFixedBtn", item);
    },
    // 操作按钮点击事件
    funcClick(btnItem) {
      this.$emit("onFuncBtn", btnItem);
    },
    // 导出函数
    eventExport(params) {
      // console.log(params, 'params')
      // console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
      // return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
      // 	params,
      // 	responseType: 'blob'
      // })
    },
    // 设置某个参数的值
    setSomeParam(field, value = null) {
      this.$set(this.model, field, value);
    },
    // 查询、重置事件
    queryEvent(state) {
      this.$emit("onQuery", this.mergeParam(true));
    },
    // 回车搜索
    handerInputEnter() {
      this.$emit("handerInputEnter", this.ruleForm);
    },
    // 条件查询-下拉框
    selectChange(event, index, indexItem) {
      if (typeof event == "number" && event < 3) {
        if (Number(event) == 2) {
          event = 0;
        } else {
          event = event - 1;
        }
      }
      if (event !== "" && event != undefined) {
        this.$emit("onElSelect", event, index, indexItem, this.model);
      }
    },
    // 页数或每页条数更改时触发
    onPageChange() {
      this.$emit("pageChange", this.mergeParam());
    },
    // 合并参数
    mergeParam(state) {
      if (state) {
        this.pageModel.page = 1;
      }
      let page = {
        page: this.pageModel.page,
        limit: this.pageModel.limit,
      };
      for (let i in this.model) {
        if (!this.model[i]) {
          this.model[i] = null;
        }
      }
      let search = Object.assign({}, page, this.model);
      return Object.assign({}, page, this.model);
    },
    // 收起展开分页
    showSearch() {
      this.isSearch = !this.isSearch;
    },
    // 查询函数
    search() {
      this.$emit("search", this.ruleForm);
    },
    // 重置函数
    refresh() {
      this.ruleForm = Object.assign({}, "");
      this.search();
    },
  },
};
</script>
<style scoped lang='scss'>
.pushButton {
  /* margin: 12px 10px 10px 10px; */
  padding: 10px;
}

::v-deep .iconfont {
  font-size: 12px;
  text-align: center;
}

::v-deep .el-tooltip {
  padding: 0 3px;
}

::v-deep .el-button--mini {
  padding: 6px 8px;
  margin: 5px;
}

.container {
  width: 100%;
  height: 100%;

  .title {
    /* @include boxBase(100%, 48px, $base-color); */
    /* @include fontBase(16px, #fff); */
    font-size: 14px;
    padding: 12px;
  }

  .buttonList + .buttonList {
    margin-left: 5px;
  }

  .main {
    /* height: auto !important; */
    overflow-y: auto;

    /* padding:0 12px; */
    .search {
      height: auto;
      background: #f5f5f5;
      border: 1px solid #d8d8d8;
      padding: 12px;
      transition: all 0.2s ease-in-out;
    }

    .hide {
      height: 0;
    }
  }

  .main::-webkit-scrollbar {
    width: 5px;
    /* background-color: #D8D8D8; */
  }

  .main::-webkit-scrollbar-thumb {
    border-radius: 5px;
    width: 5px;
    background: #b4bccc;
  }

  .w-100 {
    width: 100%;
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .back {
    cursor: pointer;
  }
}
</style>