drp-ui/src/views/system/table-template/index.vue

<script>
// import LabelTree from "./lable-tree.vue";
// import TemplateTable from "./template-table.vue";
import { list, item, role, auth } from "@/api/system/table-template";
import { listRole } from "@/api/system/role";
export default {
  name: "TableTemplate",
  components: {
    // LabelTree,
    // TemplateTable,
  },
  data() {
    return {
      loading: false,
      // 详情弹窗标题
      itemDialogTitle: "",
      // 详情弹窗显隐
      itemDialogVisible: false,
      // 授权弹窗显隐
      authDialogVisible: false,
      // 授权查询参数
      authQueryParams: { id: "", pageNum: 1, pageSize: 10 },
      // 角色列表
      roleList: [],
      // 角色总数
      roleTotal: 0,
      // 已授权角色列表,
      authRoleList: [],

      form1: { input: "", select: "" },
      form2: { input: "", select: "" },
      page: { pageNum: 1, pageSize: 25 },
      total: 0,
      options: [],
      tableData: [],
      selectionTableData: [],
      columns: [
        {
          type: "text",
          prop: "templateCode",
          label: "模板编码",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "templateName",
          label: "模板名称",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "desc",
          label: "描述",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "remark",
          label: "备注",
          showOverflowTooltip: true,
        },
        {
          type: "select",
          prop: "status",
          label: "启用状态",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "createBy",
          label: "创建者",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "createTime",
          label: "创建时间",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "updateBy",
          label: "更新者",
          showOverflowTooltip: true,
        },
        {
          type: "text",
          prop: "updateTime",
          label: "更新时间",
          showOverflowTooltip: true,
        },
      ],
    };
  },
  methods: {
    // 搜索模板列表
    fetchList() {
      list(this.from, this.page).then((res) => {
        let { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      });
    },
    // 查询模板列表
    onSearch() {
      this.pageNum = 1;
      this.fetchList();
    },
    //
    onSizeChnage() {
      this.pageNum = 1;
      this.fetchList();
    },
    //
    onCurrentChange() {
      this.fetchList();
    },
    // 选择待复制模板
    onSelectionChange(value) {
      this.selectionTableData = value;
    },
    // 打开授权弹窗
    onAuthTemplate(props) {
      let { id } = props;
      this.authDialogVisible = true;
      this.authQueryParams.id = id;
      listRole(this.authQueryParams).then((res) => {
        let { rows, total } = res;
        this.roleList = rows.map((item) => ({
          key: item.roleId,
          label: item.roleName,
        }));
        this.roleTotal = total;
      });
      role(id).then((res) => {
        let { data } = res;
        this.authRoleList = data.map((item) => item.roleId);
      });
    },
    // 打开编辑弹窗
    onEditTemplate(props) {
      this.itemDialogTitle = "编辑";
      this.itemDialogVisible = true;
      let { id } = props;
      item(id).then((res) => {
        let { data } = res;
        this.form2 = data;
        this.form2.sysTemplateItemList = data.sysTemplateItemList.map(
          (item) => ({
            ...item,
            isEdit: item.isEdit === "1" ? true : false,
            isShow: item.isShow === "1" ? true : false,
            isRequired: item.isRequired === "1" ? true : false,
          })
        );
      });
    },
    // 提交授权
    onSubmitAuth() {
      let templateId = this.authQueryParams.id;
      let roleIdList = this.authRoleList;
      auth({ templateId, roleIdList }).then((res) => {
        let { code } = res;
        if (code == 200) {
          this.authDialogVisible = false;
          this.$message.success("授权成功");
        }
      });
    },
    // 复制编辑模板
    onCopyTemplate(props) {
      this.itemDialogTitle = "复制";
      this.itemDialogVisible = true;
      let { id } = props;
      item(id).then((res) => {
        let { data } = res;
        this.form2 = data;
        this.form2.sysTemplateItemList = data.sysTemplateItemList.map(
          (item) => ({
            ...item,
            isEdit: item.isEdit === "1" ? true : false,
            isShow: item.isShow === "1" ? true : false,
            isRequired: item.isRequired === "1" ? true : false,
          })
        );
      });
    },

    // 删除模板row
    onRemoveTemplateRow(props) {
      let { code } = props;
      this.form2.sysTemplateItemList = this.form2.sysTemplateItemList.filter(
        (item) => item.code !== code
      );
    },
    // 移动模板row
    onMoveTemplateRow(direction, index1) {
      let index2 = 0;
      let swapArr = (arr, index1, index2) => {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      };
      index2 = direction === "top" ? index1 - 1 : index1 + 1;
      this.form2.sysTemplateItemList = swapArr(
        this.form2.sysTemplateItemList,
        index1,
        index2
      );
    },
  },

  created() {
    this.fetchList();
  },
};
</script>

<template>
  <el-container class="container table-template">
    <el-container class="table-template-table">
      <el-header>
        <div class="table-header-top">
          <span>查询条件</span>
          <div>
            <el-select v-model="form1.select" size="small" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="form1.input"
              size="small"
              placeholder="请输入内容"
              :readonly="loading"
              @change="onSearch"
            >
              <template #suffix>
                <i v-show="loading" class="el-input__icon el-icon-loading"></i>
                <i v-show="!loading" class="el-input__icon el-icon-search"></i>
              </template>
            </el-input>
            <el-button size="small">搜索</el-button>
            <el-button size="small">重置</el-button>
          </div>
        </div>
        <div class="table-header-bottom">
          <el-button size="small">新增</el-button>
          <el-button
            size="small"
            :disabled="selectionTableData.length !== 1"
            @click="onCopyTemplate(selectionTableData[0])"
            >复制</el-button
          >
          <el-button size="small">导入</el-button>
          <el-button size="small">导出</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="tableData" @selection-change="onSelectionChange">
          <el-table-column
            type="selection"
            width="55"
            fixed="left"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :show-overflow-tooltip="column.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="225">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="onAuthTemplate(scope.row)"
                size="small"
              >
                授权
              </el-button>
              <el-button
                @click.native.prevent="onEditTemplate(scope.row)"
                size="small"
              >
                修改
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-pagination
          @size-change="onSizeChnage"
          @current-change="onCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[25, 50, 100]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>
    </el-container>
    <el-dialog
      width="75%"
      destroy-on-close
      :title="itemDialogTitle"
      :visible.sync="itemDialogVisible"
    >
      <el-row :gutter="20">
        <el-form size="mini" :model="form2" label-position="top">
          <el-col v-for="column in columns" :key="column.prop" :span="6">
            <el-form-item :label="column.label">
              <el-input
                v-if="column.type === 'text'"
                v-model="form2[column.prop]"
              ></el-input>
              <el-select
                v-if="column.type === 'select'"
                v-model="form2[column.prop]"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="模板配置">
              <el-table :data="form2.sysTemplateItemList">
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column prop="code" label="字段编码" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.code"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="字段名称" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isEdit" label="是否编辑">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isEdit"> </el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="isShow" label="是否显示">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isShow"> </el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isRequired"> </el-switch>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="conditionType"
                  label="字段类型"
                  width="200"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.conditionType"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dictId" label="字典ID" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dictId"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="textAttribute"
                  label="文本类型"
                  width="200"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.textAttribute"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="checkRule" label="校验规则" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.checkRule"></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      :disabled="scope.$index === 0"
                      @click.native.prevent="
                        onMoveTemplateRow('top', scope.$index)
                      "
                      icon="el-icon-top"
                      circle
                    >
                    </el-button>
                    <el-button
                      :disabled="
                        scope.$index === form2.sysTemplateItemList.length - 1
                      "
                      @click.native.prevent="
                        onMoveTemplateRow('bottom', scope.$index)
                      "
                      icon="el-icon-bottom"
                      circle
                    >
                    </el-button>
                    <el-button
                      @click.native.prevent="onRemoveTemplateRow(scope.row)"
                      icon="el-icon-remove"
                      circle
                    >
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="活动区域">
              <el-select v-model="form2.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="itemDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="itemDialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      width="fit-content"
      destroy-on-close
      title="君权孙授"
      :visible.sync="authDialogVisible"
    >
      <el-transfer
        v-model="authRoleList"
        :data="roleList"
        :titles="['未授权', '已授权']"
      >
        <template #left-footer>
          <el-pagination :total="roleTotal" layout="prev, pager, next">
          </el-pagination>
        </template>
      </el-transfer>
      <div slot="footer">
        <el-button @click="authDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitAuth">确 定 </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<style scoped>
.container {
  --size: 12px;
  --margin: var(--size);
  --padding: var(--size);
}
.container {
  width: calc(100% - calc(var(--size) * 2));
  /* height: calc(100vh - calc(var(--size) * 2)); */
  margin: var(--padding);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.container .el-aside {
  margin: 0;
  padding: var(--padding);
  background-color: rgba(255, 255, 255, 1);
  border-right: 1px solid #dcdfe6;
  overflow: hidden;
}
.table-template-table .el-header {
  height: fit-content !important;
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  border-bottom: 1px solid #dcdfe6;
}
.table-template-table .table-header-top {
  margin-bottom: var(--margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-template-table .table-header-top .el-select {
  width: 150px;
  margin-right: var(--margin);
}
.table-template-table .table-header-top .el-input {
  width: 250px;
  margin-right: var(--margin);
}
.table-template-table .el-main {
  padding: 0;
}
.table-template-table .el-main .el-table {
  width: 100%;
  height: 100%;
}
.table-template-table .el-footer {
  display: flex;
  justify-content: end;
  align-items: center;
}
.el-transfer .el-transfer-panel__footer {
  display: flex;
  align-items: center;
}
</style>