|
|
@@ -0,0 +1,380 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <el-row :gutter="20" class="h100p">
|
|
|
+ <el-col :span="6" class="h100p">
|
|
|
+ <div class="grid-content1">
|
|
|
+ <el-radio-group v-model="tabPosition" @input="getRoleData">
|
|
|
+ <el-radio-button label="1">施工</el-radio-button>
|
|
|
+ <el-radio-button label="2">监理</el-radio-button>
|
|
|
+ <el-radio-button label="3">业主</el-radio-button>
|
|
|
+
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <div class="flex" style="margin-top: 10px">
|
|
|
+ <el-input
|
|
|
+
|
|
|
+ placeholder="请输入岗位名称"
|
|
|
+ clearable
|
|
|
+ @clear="clearInput"
|
|
|
+ v-model="postText"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button class="mg-l-10" @click="searchPost"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="post-list">
|
|
|
+ <el-scrollbar style="margin-top: 20px; height: 100%" v-loading="roleListLoading">
|
|
|
+ <ul
|
|
|
+ class="contextmenu"
|
|
|
+ >
|
|
|
+ <li v-for="item in roleData" :key="item"
|
|
|
+ :class="{'selected': selectedItem === item}"
|
|
|
+ @click="positionClick($event,item)">
|
|
|
+
|
|
|
+ <span>{{item.roleName}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="h100p">
|
|
|
+ <div class="grid-content2 ">
|
|
|
+ <div class="header-btn">
|
|
|
+
|
|
|
+ <el-button type="primary" size="small" @click="addEleClick">新增</el-button>
|
|
|
+ <el-button type="info" size="small">编辑</el-button>
|
|
|
+ <el-button type="success" size="small">启用</el-button>
|
|
|
+ <el-button type="warning" size="small">停用</el-button>
|
|
|
+ <el-button type="danger" size="small">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-box">
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="电签元素名称"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="字符类型"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="元素来源"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="绑定岗位"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="tag"
|
|
|
+ label="状态"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag
|
|
|
+ :type="scope.row.tag === '家' ? 'primary' : 'success'"
|
|
|
+ disable-transitions>{{scope.row.tag}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 40,50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="400">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ title="新增电签配置信息"
|
|
|
+ :visible.sync="addDialogVisible"
|
|
|
+ width="80%"
|
|
|
+ :before-close="handleAddClose">
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+
|
|
|
+ :data="tableData1"
|
|
|
+
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="电签元素名称"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ <el-select v-model="scope.row.elementType" placeholder="请选择元素或搜索" filterable >
|
|
|
+ <el-option
|
|
|
+ v-for="item in eleOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="字符类型"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="元素来源"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="绑定岗位"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="tag"
|
|
|
+ label="操作"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <el-tag
|
|
|
+ :type="scope.row.tag === '家' ? 'primary' : 'success'"
|
|
|
+ disable-transitions>{{scope.row.tag}}</el-tag> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </basic-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {getRoleList,getListPage,getElementList} from "@/api/sigital/signer.js";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabPosition: '1',
|
|
|
+ postText: '',
|
|
|
+ roleData:[],
|
|
|
+ roleListLoading:false,
|
|
|
+ multipleTable:null,
|
|
|
+ tableData: [],
|
|
|
+ selectedItem: {
|
|
|
+ id: '',
|
|
|
+ },
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ addDialogVisible: false,
|
|
|
+ tableData1: [{}],
|
|
|
+ eleOptions: [
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clearInput() {
|
|
|
+ this.postText = ''
|
|
|
+ this.getRoleData();
|
|
|
+ },
|
|
|
+ searchPost() {
|
|
|
+ this.getRoleData();
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+
|
|
|
+ },
|
|
|
+ //获取岗位列表
|
|
|
+ getRoleData() {
|
|
|
+ this.roleListLoading = true;
|
|
|
+ getRoleList({
|
|
|
+ type: this.tabPosition,
|
|
|
+ roleName: this.postText
|
|
|
+ }).then(res => {
|
|
|
+ this.roleListLoading = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.roleListLoading = false;
|
|
|
+ this.roleData = res.data;
|
|
|
+ }else{
|
|
|
+ this.roleData = [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ positionClick(event, item){
|
|
|
+ this.selectedItem = item;
|
|
|
+ },
|
|
|
+ getTableData() {
|
|
|
+ this.tableLoading = true;
|
|
|
+ getListPage({
|
|
|
+ size: this.pageSize,
|
|
|
+ current: this.currentPage,
|
|
|
+ keyword: this.postText,
|
|
|
+ id: this.selectedItem.id||'',
|
|
|
+ }).then(res => {
|
|
|
+ this.tableLoading = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+
|
|
|
+ this.tableData = res.data;
|
|
|
+ }else{
|
|
|
+ this.tableData = [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ this.pageSize = val;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ addEleClick() {
|
|
|
+ this.addDialogVisible = true;
|
|
|
+ },
|
|
|
+ handleAddClose(){
|
|
|
+ this.addDialogVisible = false;
|
|
|
+ },
|
|
|
+ getEleOptions(){
|
|
|
+ getElementList().then(res => {
|
|
|
+
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.eleOptions = res.data.data.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ label: item.eName
|
|
|
+ }));
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getRoleData();
|
|
|
+ this.getTableData();
|
|
|
+ this.getEleOptions();
|
|
|
+ },
|
|
|
+ components: {}
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.h100p{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+ .grid-content1{
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid #D6D6D6;
|
|
|
+ padding-right: 10px;
|
|
|
+ .post-list{
|
|
|
+ margin-top: 10px;
|
|
|
+ height: calc(100% - 110px);
|
|
|
+ border: 1px solid red;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu {
|
|
|
+ padding: 4px 0; /* 添加适当的内边距 */
|
|
|
+ // min-width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contextmenu ul {
|
|
|
+ list-style: none; /* 移除小圆点 */
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ // min-width: 80px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu li {
|
|
|
+ padding: 8px 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ &.selected {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: white;
|
|
|
+ span {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu li i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu li span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu li:hover,
|
|
|
+ .contextmenu li.active {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .contextmenu li.divider {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ margin: 4px 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+.grid-content2{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .header-btn{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .table-box {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .el-table {
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
