IFME主题切换效果优化，角色管理,资源管理主题切换界面优化

Surpriseplus

2023-02-08 6c33f9c50792c03e55549f82c17405552ecff540

 src/views/userManage/roleManage.vue

@@ -21,25 +21,45 @@
          :label="$t('userManage.RM.ownedSystem')"
          prop="ownedSystem"
        >
          <el-input
        <el-select
            :popper-append-to-body="false"
            v-model="roleForm.depValue"
            placeholder="请选择"
            style="width:93%"
          >
            <el-option
              :value="roleForm.depid"
              :label="roleForm.depValue"
              style=" height:auto"
            >
              <el-tree
                ref="tree"
                :data="depList"
                node-key="id"
                :props="props"
                @node-click="handleRouleDepList"
              />
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="roleForm.value"
            :disabled="true"
            :placeholder="$t('common.pleaseInput')"
          />
          /> -->

        </el-form-item>
        <el-form-item>
        <!-- <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="showDepTree(1)"
          >{{ $t('common.choose') }}</el-button>
        </el-form-item>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="success"
            size="small"
            @click="InsertFormdialog = true"
            @click="setInsertFormdialog "
            v-if="menuStatus.insert"
          ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
              $t('userManage.RM.add')
@@ -191,7 +211,7 @@
    <el-dialog
      :title="$t('userManage.RM.insertRole')"
      top="15vh"
      width="80vh"
      width="50vh"
      style="overflow: hidden"
      :visible.sync="InsertFormdialog"
    >
@@ -211,7 +231,27 @@
          :prop="insertform.depValue"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <el-input
          <el-select
            :popper-append-to-body="false"
            v-model="insertform.depValue"
            placeholder="请选择"
            style="width:93%"
          >
            <el-option
              :value="insertform.depid"
              :label="insertform.depValue"
              style=" height:auto"
            >
              <el-tree
                ref="tree"
                :data="depList"
                node-key="id"
                :props="props"
                @node-click="handleDepList"
              />
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="insertform.depValue"
            :disabled="true"
            :placeholder="$t('common.pleaseInput')"
@@ -221,7 +261,7 @@
            type="primary"
            style="margin-left:10px"
            @click="showDepTree(2)"
          >{{ $t('common.choose') }}</el-button>
          >{{ $t('common.choose') }}</el-button> -->
        </el-form-item>
        <el-form-item
          :label="$t('userManage.RM.describe')"
@@ -377,70 +417,71 @@
      class="infoBox box_div subpage_Div"
      v-show="showinfoBox"
    >
      <el-card>

      <div
        slot="header"
        class="clearfix"
      >
        <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
        <div
          slot="header"
          class="clearfix"
          style="float: right; cursor: pointer"
          @click="closeDetial"
        >
          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
          >
            <i class="el-icon-close"></i>
          </div>
          <i class="el-icon-close"></i>
        </div>
        <div class="contentBox">
          <p>
            <label> {{ $t('userManage.RM.roleName') }}:</label>
            <label class="boxlabel">{{ itemdetail.name }}</label>
          </p>
          <el-divider></el-divider>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <p>
          <label> {{ $t('userManage.RM.roleName') }}:</label>
          <label class="boxlabel">{{ itemdetail.name }}</label>
        </p>
        <el-divider></el-divider>

          <p>
            <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
            <label class="boxlabel">{{ itemdetail.depName }}</label>
          </p>
          <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
          <label class="boxlabel">{{ itemdetail.depName }}</label>
        </p>
        <el-divider></el-divider>

          <p>
            <label> {{ $t('userManage.RM.isAdmin') }}:</label>
            <label class="boxlabel">{{ itemdetail.admin }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('userManage.RM.describe') }}:</label>
            <label class="boxlabel">{{ itemdetail.descr }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('userManage.RM.creationuser') }}:</label>
            <label class="boxlabel">{{ itemdetail.createUser }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('userManage.RM.creationtime') }}:</label>
            <label class="boxlabel">{{ itemdetail.createTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('userManage.RM.updateonuser') }}:</label>
            <label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
          </p>
          <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.isAdmin') }}:</label>
          <label class="boxlabel">{{ itemdetail.admin }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.describe') }}:</label>
          <label class="boxlabel">{{ itemdetail.descr }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.creationuser') }}:</label>
          <label class="boxlabel">{{ itemdetail.createUser }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.creationtime') }}:</label>
          <label class="boxlabel">{{ itemdetail.createTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.updateonuser') }}:</label>
          <label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
        </p>
        <el-divider></el-divider>

          <p>
            <label> {{ $t('userManage.RM.updateontime') }}:</label>
            <label class="boxlabel">{{ itemdetail.updateTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('userManage.RM.remarks') }}:</label>
            <label class="boxlabel">{{ itemdetail.bak }}</label>
          </p>
          <el-divider></el-divider>
        </div>
      </el-card>
        <p>
          <label> {{ $t('userManage.RM.updateontime') }}:</label>
          <label class="boxlabel">{{ itemdetail.updateTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.remarks') }}:</label>
          <label class="boxlabel">{{ itemdetail.bak }}</label>
        </p>
        <el-divider></el-divider>
      </div>

    </div>
  </div>
</template>
@@ -456,6 +497,7 @@
  deleteRoles,
  selectDep,
  updateRole,

} from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
@@ -465,18 +507,32 @@
  },
  data() {
    return {
      props: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
      },
      depList: [],
      showinfoBox: false,
      showCata: false,
      formLabelWidth: '120px',
      InsertFormdialog: false,
      UpdateFormdialog: false,
      roleForm: {},
      roleForm: {
        depid:'',
        depValue:'',
      },
      cataName: '',
      depValue: '',
      elTreeFlag: 0,
      path_id: '',
      tableData: [],
      insertform: {},
      insertform: {
        depValue: '',
        depid: ''
      },
      updateform: {},
      count: 0,
      selData: [],
@@ -497,6 +553,36 @@
    };
  },
  methods: {
    handleRouleDepList(data, node, nodeData){
    this.roleForm.depid = data.id
      this.roleForm.depValue = data.name;
    },
    handleDepList(data, node, nodeData) {

      this.insertform.depid = data.id
      this.insertform.depValue = data.name;
    },
    setInsertFormdialog() {
      this.InsertFormdialog = true;
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    async getDepList() {
      const data = await selectdepTab();
      if (data.code != 200) {
        return this.$message.error('单位列表调用失败');
      }
      this.depList = this.treeData(data.result)
    },
    closeDetial() {
      this.showinfoBox = false;
      this.itemdetail = {};
@@ -563,7 +649,7 @@
        delete this.listData.tab;
      }
      this.listData.name = this.roleForm.username;
      this.listData.depName = this.roleForm.value;
      this.listData.depid = this.roleForm.depid;
      const data = await select_Role_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
@@ -711,7 +797,7 @@
      }
    }
    this.getRoleTabelData();
    this.getSelectDepTab();
    this.getDepList();
  },
};
</script>
@@ -745,7 +831,7 @@
  }
  .inquire {
    height: auto;
    overflow: auto;
 
    padding: 10px;
    margin-top: 10px;
    margin-top: 10px;