avue常用属性

获取avue中的一个option的column列、group并修改对应属性let group(自定义group的名称) = this.findObject(this.option.group, "写要获取的group的prop名称"); //获取option下的一个xxgrouplet columnName（自定义列的名称） = this.findObject(this.option.column

回忆是昨天里的海

6320人浏览 · 2022-03-04 21:49:30

回忆是昨天里的海 · 2022-03-04 21:49:30 发布

获取avue中的一个option的column列、group并修改对应属性

let group(自定义group的名称) = this.findObject(this.option.group, "写要获取的group的prop名称"); //获取option下的一个xxgroup

let columnName（自定义列的名称） = this.findObject(this.option.column,"写要获取的xx列的prop属性名称")；//获取一个option下的xx列名称对象

<template>
  <basic-container>
    <avue-crud ref="crud"
               v-model="form"
               :data="data"
               :option="option"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="onLoad"
               @on-load="onLoad">
      <template slot="menuLeft">   //额外添加一个删除按钮，menuLeft==》把按钮放在最左边位置
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   v-if="permission.tenant_config_delete"
                   @click="handleDelete"
                   plain>删 除
        </el-button>
      </template>
      <template slot-scope="{row}" slot="sysConfig">
        {{ expandMap(row.sysConfig) }}
      </template>
      <template slot-scope="{row}" slot="miniBtnForm">
        <el-button size="small"
                   type="primary"
                   :hidden="delBtnEnable"
                   @click="addMiniApp">添加小程序
        </el-button>
      </template>
      <template slot-scope="{row}" slot="config-miniappForm">
        <el-form>
          <el-form-item v-for="(app,index) in row['config-miniapp']" :key="app.type" :rules="miniappRules">
            <el-input type="hidden" name="type" v-model="app.type"></el-input>
            <el-row>
              <el-col span="2" class="el-form-item__label">名称:</el-col>
              <el-col span="8">
                <el-input name="name" size="small" placeholder="请输入小程序名称" v-model="app.name"></el-input>
              </el-col>
              <el-col span="3" class="el-form-item__label">路径:</el-col>
              <el-col span="8">
                <el-input name="path" size="small" placeholder="请输入小程序路径" v-model="app.path"></el-input>
              </el-col>
              <el-col span="1" class="el-form-item__label">
                <el-button size="small" type="text" icon="el-icon-delete" :hidden="delBtnEnable" @click="delMiniApp(app.type)"></el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="2" class="el-form-item__label">appid:</el-col>
              <el-col span="8">
                <el-input name="appid" size="small" placeholder="请输入小程序 appid" v-model="app.appid"></el-input>
              </el-col>
              <el-col span="3" class="el-form-item__label">appsecret:</el-col>
              <el-col span="8">
                <el-input name="appsecret" size="small" placeholder="请输入小程序 appsecret" v-model="app.appsecret"></el-input>
              </el-col>
            </el-row>
            <el-divider v-if="index < row['config-miniapp'].length - 1"></el-divider>
          </el-form-item>
        </el-form>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {add, configs, getList, remove, update} from "@/api/system/tenant/config";
import {DICT} from "@/util/tenant";
import {validatenum} from "@/util/validate";

const customer = [
  {label: "配置二维码", value: 1}
]
const qrcodes = [];

export default {
  data() {
    return {
      delBtnEnable: false,
      form: {},
      selectionList: [],
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        searchMenuSpan: 4,
        menuWidth: 240,
        labelWidth: 110,
        column: [
          {label: "所属租户", prop: "tenantId_eq", type: "select", search: true, showColumn: false, hide: true, display: false, dicData: this.$store.getters.tenants, props: {label: "title"}},

          {label: "所属租户", prop: "tenantId", type: "select", dicData: this.$store.getters.tenants, props: {label: "title"}, width: 150},
          {label: "履约平台", prop: "perfSys", type: "select", value: 1, dicData: DICT.perfSys, width: 150, rules: [{required: true, message: "请选择履约平台", trigger: "blur"}]},
          {label: "物流对接", prop: "logSys", type: "select", value: 1, dicData: DICT.logSys, width: 150, rules: [{required: true, message: "请选择物流对接系统", trigger: "blur"}]},
          {label: "核对推送", prop: "pushSys", type: "select", dicData: DICT.pushSys, width: 150, rules: [{required: true, message: "请选择核对推送系统", trigger: "blur"}]},
          {label: "当月推送日期", prop: "pushTime", type: "select", dicData: DICT.pushTime, display: true, filterable: true, multiple: true, width: 150},
          {
            label: "未发货通知", prop: "delyTime", append: "小时", value: 0, width: 100, rules: [
              {required: true, message: "请输入通知未发货时间", trigger: "blur"},
              {validator: this.validTime, message: "请输入正确时间", trigger: "blur"}
            ]
          },
          {label: "平台配置", prop: "sysConfig", minWidth: 280, overHidden: true, slot: true, display: false},
          {label: "自定义", prop: "customer", type: "checkbox", dicData: customer, showColumn: false, hide: true}
        ],
        group: [
          {
            label: "平台配置",
            prop: "wangdian",
            display: true,
            column: [
              {
                label: "冷静期", prop: "config-pushDelayTime", append: "小时", value: 0, row: true, rules: [
                  {required: true, message: "请输入推送冷静期", trigger: "blur"},
                  {validator: this.validTime, message: "请输入正确时间", trigger: "blur"}
                ]
              },
              {label: "商户号", prop: "config-shopNo", rules: [{required: true, message: "请输入商户号", trigger: "blur"}]},
              {label: "SID", prop: "config-sid", rules: [{required: true, message: "请输入SID", trigger: "blur"}]},
              {label: "KEY", prop: "config-wdtkey", rules: [{required: true, message: "请输入key", trigger: "blur"}]},
              {label: "SECERT", prop: "config-wdtsecret", rules: [{required: true, message: "请输入secret", trigger: "blur"}]}
            ]
          },
          {
            label: "配置二维码",
            prop: "qrcode",
            display: true,
            column: [
              {label: "普通二维码", prop: "config-qrcode", type: "checkbox", dicData: qrcodes, span: 24},
              {label: "微信小程序", prop: "miniBtn", span: 24, slot: true, formslot: true},

              {label: "", prop: "config-miniapp", type: "checkbox", span: 24, slot: true, formslot: true}
            ]
          }
        ]
      },
      miniappRules: {
        appid: [{required: true, message: "请输入appid", trigger: "blur"}],
        appsecret: [{required: true, message: "请输入appsecret", trigger: "blur"}],
        name: [{required: true, message: "请输入小程序名称", trigger: "blur"}],
        path: [{required: true, message: "请输入小程序路径", trigger: "blur"}]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission", "tenants"]),
    permissionList() {  
      return {
        addBtn: this.vaildData(this.permission.tenant_config_add, false),
        viewBtn: this.vaildData(this.permission.tenant_config_view, false),
        delBtn: this.vaildData(this.permission.tenant_config_delete, false),
        editBtn: this.vaildData(this.permission.tenant_config_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => ids.push(ele.id));
      return ids;
    }
  },
  created() {
    qrcodes.splice(0);
    configs().then(res => res.data.data.forEach(ele => qrcodes.push({label: ele.name, value: JSON.stringify({type: ele.type, name: ele.name, path: ele.path})})));
  },
  watch: {
    "form.perfSys": {  //监听form表单中属性为perfSys的值
      handler(val) {
        if (!val) return;

        let wangdian = this.findObject(this.option.group, "wangdian"); //获取option下的属性为wangdian的group
        wangdian.display = val === 1;  //修改wangdiangroup属性，控制wangdian group的显示不显示
      }
    },
    "form.customer": {  //监听form表单中属性为customer的值
      handler(val) {
        if (val === undefined) return;

        let wxprop = this.findObject(this.option.group, "qrcode"); 
        wxprop.display = val.indexOf(1) >= 0;
      }
    },
    "form.pushSys": {  //监听form表单中属性为pushSys的值
      handler(val) {
        if (val === undefined) return;

        let pushTime = this.findObject(this.option.column, "pushTime");  //获取option下属性为pushTime的column列
        pushTime.display = (val === 1 || val===2 || val ===3);  //val的值为1或者为2或者为3时，display为true，则显示pushTime列
      }
    }
  },
  methods: {
    findObject(arr, key) {
      return arr.find(ele => ele.prop === key);
    },
    validField() {
      let arr = [];
      this.option.group.forEach(group => {
        if (group.prop && group.display) group.column.forEach(col => arr.push(col.prop));
      })
      if (arr.length > 0) return arr;
      else return null;
    },
    fillConfig(row) {
      row.sysConfig = {};
      let list = this.validField();
      Object.keys(row).forEach(key => {
        if (key.startsWith("config-") && list && list.indexOf(key) > -1) {
          let name = key.substr(7);
          if (row[key].length > 0) row.sysConfig[name] = row[key];
          delete row[key];
        }
      });
      let pushTime = this.findObject(this.option.column, "pushTime");
      if(row.pushTime != null && row.pushTime.length> 0 && pushTime.display) {
        row.sysConfig["pushTime"]=row.pushTime;
      }
      delete row["pushTime"];
    },
    expandMap(map) {
      let res = [];
      Object.keys(map).forEach(key => {
        let val = map[key];
        if (val instanceof Array) val = JSON.stringify(val).replaceAll("\"", "").replaceAll("\\", "");
        else if (val instanceof Object) val = JSON.stringify(val).replaceAll("\"", "").replaceAll("\\", "");
        res.push(key + ":" + val + "; ");
      });
      return res.join(" ");
    },
    rowSave(row, done, loading) {
      this.fillConfig(row);
      add(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message.success("操作成功");
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      this.fillConfig(row);
      update(row).then(() => {
        done(row);
        this.$message.success("操作成功");
        this.onLoad(this.page);
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return remove([row.id]);
      }).then(() => {
        this.onLoad(this.page);
        this.$message.success("操作成功");
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    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.success("操作成功");
        this.$refs.crud.toggleSelection();
      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      });
    },
    beforeOpen(done, type) {
      if (["view"].includes(type)) this.delBtnEnable = true;
      else this.delBtnEnable = false;

      if ("add" === type) {
        this.form.customer = [];
        this.form["config-qrcode"] = [];
        this.form["config-miniapp"] = [];
      }

      if (["view", "edit"].includes(type)) {
        Object.keys(this.form).forEach(key => {
          if (key.startsWith("config-")) delete this.form[key];
        })
        Object.keys(this.form.sysConfig).forEach(key => this.form["config-" + key] = this.form.sysConfig[key]);

        this.form.customer = [];
        if (!this.form["config-miniapp"]) this.form["config-miniapp"] = [];
        if (!this.form["config-qrcode"]) this.form["config-qrcode"] = [];

        if (this.form["config-qrcode"].length > 0 || this.form["config-miniapp"].length > 0) {
          this.form.customer.push(1);
        }
      }
      done();
    },
    validTime(rule, val, callback) {
      if (validatenum(val, 2)) callback(new Error(rule.message));
      else callback();
    },
    addMiniApp() {
      let type = 201;
      this.form["config-miniapp"].forEach(app => {
        if (app.type >= type) type = app.type + 1;
      })
      this.form["config-miniapp"].push({type: type, appid: "", appsecret: "", name: "", path: ""});
    },
    delMiniApp(type) {
      let inx = this.form["config-miniapp"].findIndex(app => app.type === type);
      if (inx >= 0) this.form["config-miniapp"].splice(inx, 1);
    }
  }
};
</script>

<style>
</style>

把13位时间戳格式化成yyyy-mm-dd hh:mm:ss格式

<template>
  <basic-container>
    <avue-crud ref="crud"
               v-model="form"
               :option="option" 
               :data="data"  //一般用于整个列表显示
               :page="page"  //用于分页查询，配置之后会自动在表格下方显示分页的状态
               :permission="permissionList"   //权限设置
               @selection-change="selectionChange" 
               @search-change="searchChange"  //查询条件改变后执行searchChange方法
               @search-reset="searchReset"  //点击重置按钮按钮后执行searchReset方法
               @current-change="currentChange"
               @size-change="sizeChange"  //分页数量等改变了执行sizeChange方法
               @refresh-change="onLoad"   //刷新界面后执行onLoad方法
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="primary"     //额外添加一个下载按钮，放在table表格的左边位置
                   size="small"
                   icon="el-icon-download"
                   v-if="permission.odc_download"  //按钮是否显示的条件
                   @click="download()">下载
        </el-button>
      </template>

      <template slot-scope="{row}" slot="createTime">    //slot-scope="{row}"代表作用范围是每一行，把每一行的createTime，13位时间戳转成如下时间格式
        {{ new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss") }}
      </template>
      <template slot-scope="{row}" slot="createTimeForm">
        <div class="el-form-item__content" style="margin-left: 15px;">
          {{ new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss") }}
        </div>
      </template>
      <template slot-scope="{row}" slot="packTime" v-if="(row.packTime !== -1 && row.packTime!== null)">v-if是转换时间格式的条件，把每一行的不等于-1且不等于null的1packTime，转成如下格式（即由13位时间戳转成如下格式）
        {{ new Date(row.packTime).format("yyyy-MM-dd hh:mm:ss") }}
      </template>
      <template slot-scope="{row}" slot="packTimeForm" v-if="(row.packTime !== -1 && row.packTime!== null)">
        <div class="el-form-item__content" style="margin-left: 15px;">
          {{ new Date(row.packTime).format("yyyy-MM-dd hh:mm:ss") }}
        </div>
      </template>

    </avue-crud>

  </basic-container>
</template>