优化角色权限样式

manager/src/views/sys/role-manage/roleManage.vue

@@ -8,45 +8,16 @@
         <Button @click="addRole" type="primary">添加角色</Button>
         <Button @click="delAll">批量删除</Button>
       </Row>
-      <Table
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
-        ref="table"
-        sortable="custom"
-        @on-sort-change="changeSort"
-        @on-selection-change="changeSelect"
-      ></Table>
       <Row type="flex" justify="end" class="mt_10">
-        <Page
+        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total
-          :current="pageNumber"
+          show-elevator show-sizer></Page>
-          :total="total"
-          :page-size="pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
       </Row>
     </Card>
 
     <!-- 编辑 -->
-    <Modal
+    <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
-      :title="modalTitle"
+      <Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
-      v-model="roleModalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form
-        ref="roleForm"
-        :model="roleForm"
-        :label-width="80"
-        :rules="roleFormValidate"
-      >
         <FormItem label="角色名称" prop="name">
           <Input v-model="roleForm.name" />
         </FormItem>
@@ -56,65 +27,33 @@
       </Form>
       <div slot="footer">
         <Button type="text" @click="cancelRole">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitRole"
+        <Button type="primary" :loading="submitLoading" @click="submitRole">提交
-        >提交
+        </Button>
-        </Button
-        >
       </div>
     </Modal>
     <!-- 菜单权限 -->
-    <Modal
+    <Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
-      :title="modalTitle"
-      v-model="permModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{ top: '30px' }"
-      class="permModal"
-    >
       <div style="position: relative">
-        <Tree
+        <Tree ref="tree" :data="permData" show-checkbox :render="renderContent" :check-strictly="true">
-          ref="tree"
-          :data="permData"
-          show-checkbox
-          :render="renderContent"
-          :check-strictly="true"
-        >
         </Tree>
         <Spin size="large" fix v-if="treeLoading"></Spin>
       </div>
       <div slot="footer">
         <Button type="text" @click="cancelPermEdit">取消</Button>
-        <Select
+        <Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
-          v-model="openLevel"
-          @on-change="changeOpen"
-          style="width: 110px; text-align: left; margin-right: 10px"
-        >
           <Option value="0">展开所有</Option>
           <Option value="1">收合所有</Option>
           <Option value="2">仅展开一级</Option>
           <Option value="3">仅展开两级</Option>
         </Select>
-        <Button
+        <Button type="primary" :loading="submitPermLoading" @click="submitPermEdit(true)">编辑
-          type="primary"
+        </Button>
-          :loading="submitPermLoading"
-          @click="submitPermEdit(true)"
-        >编辑
-        </Button
-        >
       </div>
     </Modal>
     <!-- 数据权限 -->
-    <Modal
+    <Modal :title="modalTitle" v-model="depModalVisible" :mask-closable="false" :width="500" class="depModal">
-      :title="modalTitle"
+      <Alert show-icon>默认可查看全部数据，自定义数据范围时请勾选下方数据
-      v-model="depModalVisible"
+      </Alert>
-      :mask-closable="false"
-      :width="500"
-      class="depModal"
-    >
-      <Alert show-icon
-      >默认可查看全部数据，自定义数据范围时请勾选下方数据
-      </Alert
-      >
       <Form :label-width="85">
         <FormItem label="数据范围">
           <Select v-model="dataType" transfer>
@@ -127,38 +66,27 @@
       </Form>
       <div v-show="dataType == 1" style="margin-top: 15px">
         <div style="position: relative">
-          <Tree
+          <Tree ref="depTree" :data="depData" :load-data="loadData" @on-toggle-expand="expandCheckDep" multiple style="margin-top: 15px"></Tree>
-            ref="depTree"
-            :data="depData"
-            :load-data="loadData"
-            @on-toggle-expand="expandCheckDep"
-            multiple
-            style="margin-top: 15px"
-          ></Tree>
           <Spin size="large" fix v-if="depTreeLoading"></Spin>
         </div>
       </div>
       <div slot="footer">
         <Button type="text" @click="depModalVisible = false">取消</Button>
-        <Button
+        <Button type="primary" :loading="submitDepLoading" @click="submitDepEdit">提交
-          type="primary"
+        </Button>
-          :loading="submitDepLoading"
-          @click="submitDepEdit"
-        >提交
-        </Button
-        >
       </div>
     </Modal>
 
     <!-- 保存权限弹出选择权限 -->
-    <Modal
+    <Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
-      v-model="selectIsSuperModel"
+      <!-- <div class="btns">
-      title="选择菜单权限"
+        <Button type="primary"  class="btn-item">一键选中·数据权限</Button>
-      :loading="superModelLoading"
+        <Button  class="btn-item">一键选中·查看权限</Button>
-      @on-ok="saveRole"
+      </div> -->
-    >
+      <div class="role-list">
-      <div v-for="(item, index) in saveRoleWay" :key="index">
+        <div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
-        <span class="title">{{ item.title }}</span>
+          <div class="title">{{ item.title }}</div>
+          <div class="content">
           <RadioGroup type="button" button-style="solid" v-model="item.isSuper">
             <Radio :label="true">
               <span>操作数据权限</span>
@@ -168,6 +96,8 @@
             </Radio>
           </RadioGroup>
           </div>
+        </div>
+      </div>
     </Modal>
   </div>
 </template>
@@ -207,11 +137,13 @@ export default {
       permModalVisible: false, // 菜单权限modal
       depModalVisible: false, // 部门modal
       modalTitle: "", // modal标题
-      roleForm: { // 角色表单
+      roleForm: {
+        // 角色表单
         name: "",
         description: "",
       },
-      roleFormValidate: { // 验证规则
+      roleFormValidate: {
+        // 验证规则
         name: [
           { required: true, message: "角色名称不能为空", trigger: "blur" },
         ],
@@ -219,7 +151,8 @@ export default {
       submitLoading: false, // 提交loading
       selectList: [], // 已选列表
       selectCount: 0, // 已选总数
-      columns: [ // 表头
+      columns: [
+        // 表头
         {
           type: "selection",
           width: 60,
@@ -234,7 +167,7 @@ export default {
           title: "备注",
           key: "description",
           minWidth: 150,
-          tooltip: true
+          tooltip: true,
         },
         {
           title: "创建时间",
@@ -285,7 +218,7 @@ export default {
                 {
                   props: {
                     size: "small",
-                    type: "info"
+                    type: "info",
                   },
                   style: {
                     marginRight: "5px",
@@ -655,7 +588,6 @@ export default {
         way.push(perm);
         this.saveRoleWay = way;
       });
-
     },
 
     /**保存权限 */
@@ -777,3 +709,33 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.role-list {
+  height: 500px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+.role-item {
+  width: 50%;
+  display: flex;
+  padding: 20px 0;
+  align-items: center;
+  >.title{
+    flex: 2;
+    text-align: right;
+  }
+  >.content{
+    flex: 10;
+  }
+}
+.btns{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.btn-item{
+  margin-right: 20px;
+}
+
+</style>

seller/src/views/order/after-order/orderComplaint.vue

@@ -102,12 +102,10 @@
           {
             title: "订单编号",
             key: "orderSn",
-            sortType: "desc",
           },
           {
             title: "商品名称",
             slot: "goodsName",
-            sortType: "desc",
           },
           {
             title: "投诉主题",