项目中遇到的一些前端的效果的展示

avue组件avue-form自定义提交按钮

avue组件avue-form自定义提交按钮

使用环境

编辑表单时，需要自定义一些功能项，没办法在avue框架的表单中实现，就需要添加代码块，自定义校验功能。

avue-form 写法

	<avue-form :option="optionRelease" ref='form' v-model="form" >
        </avue-form>
        <template>
          <el-row>
          <!-- 自定义代码块 -->
            ...
            </el-row>
        </template>
        <span slot="footer"
              class="avue-dialog__footer">
        <el-button size="small"
                   @click="closeTaskBox()">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submitForm">确定下达</el-button>
      </span>

option 写法

	optionRelease: {
        emptyBtn: false, //隐藏清空按钮
        submitBtn: false, //隐藏提交按钮
        height: 'auto',
    }

表单校验 写法

	submitForm() {
      this.$refs["form"].validate((valid,done) => {
        if (valid) {
          this.handleSubmitModel()
          done();
        }
      });
    },

done是必须的方法，校验成功后表单中输入框会变成不可用状态，done方法的作用是：恢复表单输入框状态

效果展示：

数据左右级联操作逻辑

数据左右级联操作逻辑

使用环境

编辑表单时，需要自定义一些功能项，点击左侧树节点，中间展示数据，勾选后在最右侧展示。

	<!--检查任务管理-->
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-circle-plus"
                   plain
                   v-if="permission.checktaskmanege_add"
                   @click="handleCreate">任务下达
        </el-button>
      </template>
      <template slot-scope="{row}" slot="selfItemNameForm">
        <el-tag>{{row.selfItemName}}</el-tag>
        <el-tag>{{row.mainPointScore}}分</el-tag>
      </template>
      <template slot-scope="scope" slot="taskStatus">
        <template v-if="scope.row.taskStatus == 1">
          <el-tag type="">{{scope.row.$taskStatus}}</el-tag>
        </template>
        <template v-else-if="scope.row.taskStatus == 2">
          <el-tag type="">{{scope.row.$taskStatus}}</el-tag>
        </template>
        <template v-else-if="scope.row.taskStatus == 3">
          <el-tag type="success">{{scope.row.$taskStatus}}</el-tag>
        </template>
      </template>
    </avue-crud>
    <div>
      <el-dialog title="任务下达"
                 append-to-body
                 :visible.sync="taskBox"
                 width="80%"
                 @close="closeTaskBox">
        <avue-form :option="optionRelease" ref='form' v-model="form" >
        </avue-form>
        <template>
          <el-row>
            <el-col :span="4">
                <el-scrollbar>
                  <basic-container>
                    <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
                  </basic-container>
                </el-scrollbar>
            </el-col>
            <el-col :span="10">
              <basic-container>
                <el-table
                  ref="multipleTable"
                  :data="itemData"
                  style="width: 100%"
                  @selection-change="handleSelectChange"
                  @select="handleSelectChangeSingle"
                >
                  <el-table-column type="selection" width="55" ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="指标项名称">
                  </el-table-column>
                </el-table>
              </basic-container>
            </el-col>
            <el-col :span="8">
              <basic-container>
                <span>已选内容</span>
              </basic-container>
              <basic-container>
                <ul class="infinite-list" style="overflow:auto">
                  <li v-for="(item, index) in hazardFactorsForm.items" :key="index"  class="text item">
                    <el-tag closable type="" @close="delHazardFactorsForm(item, index)">{{ item.name }}</el-tag>
                  </li>
                </ul>
              </basic-container>
            </el-col>
          </el-row>
        </template>
        <span slot="footer"
              class="avue-dialog__footer">
        <el-button size="small"
                   @click="closeTaskBox()">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submitForm">确定下达</el-button>
      </span>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import {getList, add, getListByTaskId} from "@/api/business/integrity/check_task_manage";
import {mapGetters} from "vuex";
import {getLazyTree} from "@/api/business/integrity/self_inspect_correcr_index";
import {
  getListItem,
} from "@/api/business/integrity/self_inspect_correcr_index_item";


export default {
  data() {
    return {
      hazardFactorsForm: {
        items: []
      },
      form: {
        name:''
      },
      fullSelect: true,
      query: {},
      taskBox: false,
      taskView: false,
      initFlag: true,
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon:true, // 局部展开收缩
        labelWidth:120,
        searchLabelWidth: 110,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        column: [
          {
            label: "任务名称",
            disabled: true,
            search: true,
            prop: "name",
          },
          {
            label: "下达时间",
            disabled: true,
            prop: "createTime",
          },
          {
            label: "相对人类型",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=counterpart_category",
            type: 'tree',
            cascader: ['counterpartCode'],
            cascaderIndex: 1,
            search: true,
            disabled: true,
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            // hide: true,
            showColumn: false,
            dataType: "string",
            prop: "deptCategory",
            slot: true,
            rules: [{
              required: true,
              message: "请选择相对人类型",
              trigger: "blur"
            }]
          },
          {
            label: "管理相对人",
            prop: "counterpartCode",
            type: 'select',
            search: true,
            disabled: true,
            showColumn: false,
            hide: true,
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: "/api/zhwjpt-base/counterpart-common/select?counterpartCategory={{key}}",
            rules: [{
              required: true,
              message: "请选择管理相对人",
              trigger: "blur"
            }]
          },
          {
            label: "管理相对人",
            editDisplay: false,
            viewDisplay: false,
            prop: "counterpartName",
          },
          {
            label: "执行状态",
            prop: "taskStatus",
            search: true,
            type: "select",
            dicData: [
              {
                label: "未执行",
                value: 1
              },
              {
                label: "已完成",
                value: 3
              }
            ],
          },
        ],
        group: [
          {
            label: '任务模块',
            prop: 'reportInfo',
            arrow:false, //是否展示折叠箭头-效果
            // collapse:false,
            column: [
              {
                label: '',
                prop: 'itemDataShow',
                labelWidth: "auto",
                // hide: true,
                type: 'dynamic',
                span: 24,
                children: {
                  index: false,       //是否显示序号
                  delBtn: false, // 行删除按钮
                  addBtn:false, // 行新增按钮
                  align: 'center',
                  type:'form',
                  headerAlign: 'center',
                  column: [
                    {
                      label: '',
                      labelWidth: "auto",
                      prop: "selfItemName",
                      span: 18
                    },
                  ]
                },
              },
            ]
          },
        ],
      },
      optionRelease: {
        emptyBtn: false,
        submitBtn: false,
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        column: [
          {
            label: "任务名称",
            labelWidth:120,
            prop: "name",
            search: true,
            slot: true,
            rules: [{
              required: true,
              message: "请输入风险指标名称",
              trigger: "blur"
            }],
          },{
            label: "相对人类型",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=counterpart_category",
            type: 'tree',
            cascader: ['counterpartCode'],
            cascaderIndex: 1,
            labelWidth: 120,
            search: true,
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            // hide: true,
            showColumn: false,
            dataType: "string",
            prop: "deptCategory",
            slot: true,
            rules: [{
              required: true,
              message: "请选择相对人类型",
              trigger: "blur"
            }]
          },
          {
            label: "管理相对人",
            prop: "counterpartCode",
            type: 'select',
            labelWidth: 120,
            search: true,
            showColumn: false,
            props: {
              label: 'name',
              value: 'code'
            },

            dicUrl: "/api/zhwjpt-base/counterpart-common/select?counterpartCategory={{key}}",
            rules: [{
              required: true,
              message: "请选择管理相对人",
              trigger: "blur"
            }]
          },
        ]
      },
      data: [],
      itemData: [],
      itemDataShow: [],
      itemTempData: [],
      treeNodeClick: false,
      treeDeptId: '',
      treeData: [],
      treeOption: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 0 : node.data.id;
          getLazyTree(parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'title',
          value: 'value',
          children: 'children'
        }
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: false,
        // addBtn: this.vaildData(this.permission.checktaskmanege_add, false),
        viewBtn: this.vaildData(this.permission.checktaskmanege_view, false),
        delBtn: this.vaildData(this.permission.checktaskmanege_delete, false),
        editBtn: this.vaildData(this.permission.checktaskmanege_edit, false)
      };
    },
  },
  methods: {
    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) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      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;
        this.loading = false;
      });
    },
    //创建任务弹窗
    handleCreate() {
      this.taskBox = true;
    },
    submitForm() {
      this.$refs["form"].validate((valid,done) => {
        if (valid) {
          this.handleSubmitModel()
          done();
        }
      });
    },
    //保存任务
    handleSubmitModel( ) {
      let itemIds = [];
      if(this.hazardFactorsForm.items.length <= 0){
        this.$message({
          type: "error",
          message: "请选择指标项!"
        });
        return;
      }
      this.hazardFactorsForm.items.forEach(ele => {
        itemIds.push(ele.id);
      });
      this.form.itemIds = itemIds.join(",");
      this.form.taskStatus = 1;
      add(this.form).then(() => {
        // this.initFlag = false;
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.taskBox = false
      }, error => {
        window.console.log(error);
      });
    },

    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        this.onLoadItemView(this.form.id, type);
      }
      done();
    },
    //关闭任务弹窗
    closeTaskBox() {
      this.taskBox = false
      this.clearTaskBox()

    },
    //清空弹窗
    clearTaskBox(){
      this.itemData = [];
      this.itemDataShow = [];
      this.form = {
        name:'',
        deptCategory:'',
        counterpartCode:'',
      };
      this.itemTempData = [];
      this.hazardFactorsForm = {
        items: []
      }
    },
    nodeClick(data) {
      this.fullSelect = true;
      this.treeDeptId = data.id;
      this.onLoadItem();
    },
    onLoadItem() {
      // this.loading = true;
      getListItem(this.treeDeptId).then(res => {
        const data = res.data.data;
        this.itemData = data;
        this.backViewTable();
      });
    },
    //数据表回显 -- 显示
    backViewTable(){
      this.itemData.forEach(item => {
        this.hazardFactorsForm.items.forEach(itemTemp => {
          if(itemTemp.id == item.id){
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(item,true)
            });
          }
        })
      })
    },

    //数据表回显--移除
    removeViewTable(id){
      this.itemData.forEach(item => {
        if(id == item.id){
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(item,false)
          });
        }
      })
    },
    onLoadItemView() {
      // this.loading = true;
      getListByTaskId(this.form.id).then(res => {
        const data = res.data.data;
        this.form.itemDataShow = data;
        this.loading = false;
      });
    },
    //监听复选按钮-全选
    handleSelectChange(selections){
      var tempData = [];
      if(this.fullSelect){
        this.fullSelect = false;
      }else if(selections.length == this.itemData.length){
        tempData = this.hazardFactorsForm.items;
        selections.forEach(item => {
          var addAble = true;
          tempData.forEach(itemTemp => {
            if(itemTemp.id == item.id){
              addAble = false;
            }
          })
          if(addAble){
            this.hazardFactorsForm.items.push({
              id: item.id,
              name: item.name
            });
          }
        })
      }else if(selections.length <= 0){
        tempData = this.hazardFactorsForm.items;
        this.itemData.forEach(item => {
          var delAble = false;
          var viewIndex = 0;
          tempData.forEach(itemTemp => {
            if(itemTemp.id == item.id){
              delAble = true;
            }
            if(!delAble){
              viewIndex++;
            }
          })
          if(delAble){
            this.delHazardFactorsForm(item, viewIndex)
          }
        })
      }
    },
    //监听复选按钮 -- 单选
    handleSelectChangeSingle(selection, row){
      var addOrDelAble = false;//新增活删除 true：新增 、 false: 删除
      selection.forEach(itemTemp => {
        if(itemTemp.id == row.id){
          addOrDelAble = true;
          // continue;
        }
      })
      if(addOrDelAble){
        this.hazardFactorsForm.items.push({
          id: row.id,
          name: row.name
        });
      }else {
        if(this.hazardFactorsForm.items.length>0){
          var indexAble = true;
          var viewIndex = 0;
          this.hazardFactorsForm.items.forEach(itemTemp => {
            if(itemTemp.id == row.id){
              indexAble = false;
              // continue;
            }
            if(indexAble){
              viewIndex++;
            }
          })
          this.delHazardFactorsForm(row, viewIndex)
        }
      }
    },
    delHazardFactorsForm(item, index) {
      this.hazardFactorsForm.items.splice(index, 1);
      this.removeViewTable(item.id);
    },

  }
};
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

</style>