Source/plt-web/plt-web-ui/src/views/wel/homeConfig.vue

@@ -1,4 +1,5 @@
<template>
  <!-- 业务管理 首页配置 -->
  <basic-container>
    <avue-crud
      ref="crud"
@@ -8,14 +9,11 @@
      @selection-change="selectChange"
      @row-click="rowClickHandler"
      @refresh-change="handleRefresh"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="menuLeft">
        <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
        </el-button>
        <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
        </el-button>
        <!--<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除</el-button>-->
      </template>

      <template slot="menu" slot-scope="{row,index}">
@@ -33,30 +31,42 @@
      :visible.sync="visible"
      append-to-body="true"
      class="avue-dialog"
      width="500px"
      width="540px"
      @close="visibleCloseHandler"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" size="small">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="组件：" prop="id">
              <avue-select v-model="form.id" placeholder="请选择组件" type="tree" :dic="dic"></avue-select>
            <el-form-item label="排序：" prop="orderNum">
              <avue-input-number v-model="form.orderNum" precision="0" style="width: 100%" :min="1" controls-position=""></avue-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="占据列数：" prop="span">
              <avue-input-number v-model="form.span" precision="0" style="width: 100%" :max="24" :min="1" controls-position="" tip="总列数为24，如占满整行请输入24"></avue-input-number>
            <el-form-item label="显示模块：" prop="module">
              <avue-select v-model="form.module" placeholder="请选择组件" type="tree" :dic="dic"></avue-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题：" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标：" prop="icon">
              <avue-input-icon v-model="form.icon" :icon-list="iconList" placeholder="请选择图标">
              </avue-input-icon>
              <input-icon v-model="form.icon" placeholder="请选择图标">
              </input-icon>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述：" prop="description">
              <el-input v-model="form.description" :rows="2" type="textarea"></el-input>
            <el-form-item label="占据列数：" prop="num" tip="总列数为24">
              <avue-input-number v-model="form.num" precision="0" style="width: 150px" :max="24" :min="1" controls-position="" labelTip="总列数为24，如占满整行请输入24"></avue-input-number>
              <span style="color: #999999;font-size: 12px;"> 按24分栏，占满一行为24</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高度占比：" prop="ratio">
              <avue-input-number v-model="form.ratio" precision="2" style="width: 150px" :min="0" :max="1" controls-position=""></avue-input-number>
              <span style="color: #999999;font-size: 12px;"> 占满显示区域高度设置1，显示10%高度设置0.1</span>
            </el-form-item>
          </el-col>
        </el-row>
@@ -70,16 +80,14 @@
</template>

<script>
import iconList from "@/config/iconList";
import basicOption from "@/util/basic-option";
import {addSave, deleteStatus, editSave,  gridStatus} from "@/api/modeling/statusPool/api";
import {addSave, delData, editSave,  getAllData} from "@/api/homeConfig";
import func from "@/util/func";

export default {
  name: "homeConfig",
  data() {
    return {
      iconList: iconList,
      loading: false,
      data: [],
      option: {
@@ -90,42 +98,52 @@
        calcHeight: -60,
        column: [
          {
            label: '排序',
            prop: 'orderNum',
          },
          {
            label: '组件',
            prop: 'id',
            prop: 'module',
          },
          {
            label: '标题',
            prop: 'title',
          },
          {
            label: '图标',
            prop: 'icon',
          },
          {
            label: '占据列数',
            prop: 'span'
            prop: 'num'
          },
          {
            label: '标签',
            prop: 'name',
            sortable: true,
          },
          {
            label: '描述',
            prop: 'description',
            label: '高度占比',
            prop: 'ratio',
          },
        ]
      },
      dialogTitle: '',
      form: {
        id: "",
        name: "",
        description: ""
        orderNum:1,
        module: "",
        title: "",
        num:24,
        icon: "",
        ratio:1.00
      },
      rules: {
        id: [
        module: [
          {required: true, message: '请选择组件', trigger: 'blur'},
        ],
        num:[
          {required: true, message: '请输入占据列数', trigger: 'blur'},
        ],
        ratio:[
          {required: true, message: '请输入高度占比', trigger: 'blur'},
        ]
      },
      dic:[{
        label:'待办任务',
        value:'UndoTaskPortlet'
      },{
        label:'选项2',
        value:1
      }],
      dic:[],
      visible: false,
      selectList: [],
      lastIndex: null
@@ -136,13 +154,30 @@
  },
  methods: {
    getList() {
      gridStatus(this.page.currentPage, this.page.pageSize).then(res => {
      getAllData().then(res => {
        const data = res.data.data;
        this.data = data;
        this.page.total = res.data.total;
        this.loading = false;
      }).catch(err => {
        this.$message.error(err);

        //components下的组件，value值为组件名称
        const dic=[{
          label:'待办流程任务',
          value:'UndoTaskPortlet'
        },{
          label:'待办事项',
          value:'taskPortlet'
        },{
          label:'test',
          value:'test'
        }];
        dic.forEach(dicItem => {
          data.forEach(item => {
            if (dicItem.value == item.module) {
              dicItem.disabled=true;
            }
          })
        })
        this.dic=dic
      });
    },

@@ -156,29 +191,17 @@
      this.selectList = row;
    },

    //  条数
    sizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },

    // 页码
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },

    // 行单选
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.useCrud,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
          this.selectList = [row];
        }
      );
    },
@@ -186,6 +209,7 @@
    // 创建按钮
    addClickHandler() {
      this.visible = true;
      this.form.orderNum=this.data.length+1;
      this.dialogTitle = 'add';
    },

@@ -208,7 +232,7 @@
        type: 'warning'
      }).then(() => {
        this.loading = true;
        deleteStatus(this.selectList).then(res => {
        delData(this.selectList).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getList();
@@ -229,9 +253,8 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const list = [row];
        this.loading = true;
        deleteStatus(list).then(res => {
        delData({oid:row.oid}).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getList();
@@ -248,10 +271,12 @@
    // 关闭对话框
    visibleCloseHandler() {
      const form = {
        id: "",
        name: "",
        imagePath: "",
        description: ""
        orderNum:1,
        module: "",
        title: "",
        num:24,
        icon: "",
        ratio:1
      }
      this.form = form;
      this.visible = false;
@@ -265,12 +290,12 @@
        if (valid) {
          saveFunction(this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.obj);
              this.$message.success(res.data.msg);
              this.loading = true;
              this.getList();
              this.visible = false;
            } else {
              this.$message.error(res.data.obj);
              this.$message.error(res.data.msg);
            }
          })
        } else {