fl-web-component 0.1.1 → 1.0.1

package/packages/components/model/components/proof-role.vue

@@ -1,15 +1,13 @@
 <template>
   <div>
-		<div class="trigger-button">
-      <el-button type="text" @click="triggerDialog"
-        ><i class="pre-img"></i>角色管理</el-button
-      >
+    <div class="trigger-button">
+      <el-button type="text" @click="triggerDialog"><i class="pre-img"></i>角色管理</el-button>
     </div>
 
-      <!-- @handleClose="handleClose"
+    <!-- @handleClose="handleClose"
       @submitDialogData="submitDialogData" -->
 
-		<com-dialog
+    <com-dialog
       v-if="dialogVisible"
       dialog-title="角色管理"
       :visible="dialogVisible"
@@ -17,91 +15,82 @@
       :footerDisabled="true"
       @handleClose="handleClose"
     >
-			<el-row :gutter="10" class="mb8">
-				<el-col :span="1.5">
-					<el-button
-						type="primary"
-						icon="el-icon-plus "
-						size="small"
-						@click="handleAdd"
-						v-hasPermi="[
-							`project:role:add:proj:${defaultParams.projectId}`,
-						]"
-						>新增</el-button
-					>
-				</el-col>
-			</el-row>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            icon="el-icon-plus "
+            size="small"
+            @click="handleAdd"
+            v-hasPermi="[`project:role:add:proj:${defaultParams.projectId}`]"
+            >新增</el-button
+          >
+        </el-col>
+      </el-row>
 
-			<el-table
-				v-loading="loading"
-				:data="roleList"
-				max-height="65vh"
-				@selection-change="handleSelectionChange"
-			>
+      <el-table
+        v-loading="loading"
+        :data="roleList"
+        max-height="65vh"
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column label="序号" type="index" width="80" />
         <el-table-column
-					label="角色名称"
+          label="角色名称"
           width="250"
           prop="roleName"
-					:show-overflow-tooltip="true"
-				/>
-				<el-table-column
-					label="权限字符"
-					prop="roleKey"
-					:show-overflow-tooltip="true"
-					width="200"
-				/>
-				<el-table-column label="创建时间" prop="createTime">
-					<template slot-scope="scope">
-						<span>{{ parseTime(scope.row.createTime) }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column
-					label="操作"
-					class-name="small-padding fixed-width"
-				>
-					<template slot-scope="{ row }">
-						<el-button
-							v-show="row.projectId"
-							v-hasPermi="[
-								`project:role:edit:proj:${projectId}`,
-							]"
-							size="mini"
-							type="text"
-							@click="handleUpdate(row)"
-							>编辑</el-button
-						>
-						<!-- builtIn：'0' 内置，'2' 非内置 -->
-						<template v-if="row.builtIn === '2'">
-							<el-button
-								v-show="row.projectId"
-								v-hasPermi="[
-									`project:role:remove:proj:${projectId}`,
-								]"
-								size="mini"
-								type="text"
-								@click="handleDelete(row)"
-								>删除</el-button
-							>
-						</template>
-					</template>
-				</el-table-column>
-			</el-table>
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="权限字符"
+          prop="roleKey"
+          :show-overflow-tooltip="true"
+          width="200"
+        />
+        <el-table-column label="创建时间" prop="createTime">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button
+              v-show="row.projectId"
+              v-hasPermi="[`project:role:edit:proj:${projectId}`]"
+              size="mini"
+              type="text"
+              @click="handleUpdate(row)"
+              >编辑</el-button
+            >
+            <!-- builtIn：'0' 内置，'2' 非内置 -->
+            <template v-if="row.builtIn === '2'">
+              <el-button
+                v-show="row.projectId"
+                v-hasPermi="[`project:role:remove:proj:${projectId}`]"
+                size="mini"
+                type="text"
+                @click="handleDelete(row)"
+                >删除</el-button
+              >
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
 
-			<!-- <pagination
+      <!-- <pagination
 				v-show="total > 0"
 				:total="total"
 				:page.sync="queryParams.pageNum"
 				:limit.sync="queryParams.pageSize"
 				@pagination="getList"
 			/> -->
-		</com-dialog>
+    </com-dialog>
     <!-- 新增或编辑角色配置对话框 -->
-		<!-- append-to-body -->
-		<!-- :close-on-click-modal="false" -->
+    <!-- append-to-body -->
+    <!-- :close-on-click-modal="false" -->
     <com-dialog
-			v-if="dialogOperate.visible"
-			:dialog-title="title"
+      v-if="dialogOperate.visible"
+      :dialog-title="title"
       :visible="dialogOperate.visible"
       width="500px"
       @handleClose="handleOperateClose"
@@ -109,11 +98,7 @@
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
-          <el-input
-            v-trim
-            v-model="form.roleName"
-            placeholder="请输入角色名称"
-          />
+          <el-input v-trim v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
         <el-form-item prop="roleKey">
           <span slot="label">
@@ -125,11 +110,7 @@
             </el-tooltip>
             权限字符
           </span>
-          <el-input
-            v-trim
-            v-model="form.roleKey"
-            placeholder="请输入权限字符"
-          />
+          <el-input v-trim v-model="form.roleKey" placeholder="请输入权限字符" />
         </el-form-item>
         <!-- <el-form-item label="角色顺序" prop="roleSort">
             <el-input-number
@@ -141,19 +122,13 @@
             />
           </el-form-item> -->
         <el-form-item label="菜单权限">
-          <el-checkbox
-            v-model="menuExpand"
-            @change="handleCheckedTreeExpand($event)"
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)"
             >展开/折叠</el-checkbox
           >
-          <el-checkbox
-            v-model="menuNodeAll"
-            @change="handleCheckedTreeNodeAll($event)"
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)"
             >全选/全不选</el-checkbox
           >
-          <el-checkbox
-            v-model="form.menuCheckStrictly"
-            @change="handleCheckedTreeConnect($event)"
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event)"
             >父子联动</el-checkbox
           >
           <el-tree
@@ -177,7 +152,7 @@
           ></el-input>
         </el-form-item>
       </el-form>
-		</com-dialog>
+    </com-dialog>
   </div>
 </template>
 
@@ -192,7 +167,7 @@ export default {
       return this.defaultParams.projectId;
     },
   },
-	components: {
+  components: {
     ComDialog: () => import('./com-dialogWrapper'),
   },
   watch: {
@@ -201,7 +176,7 @@ export default {
     //   this.getList();
     // },
   },
-	props: {
+  props: {
     defaultParams: {
       type: Object,
       default() {
@@ -211,11 +186,11 @@ export default {
   },
   data() {
     return {
-			dialogVisible: false,
-			dialogOperate: {
+      dialogVisible: false,
+      dialogOperate: {
         visible: false,
       },
-			// 遮罩层
+      // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
@@ -261,9 +236,7 @@ export default {
           { required: true, message: '角色名称不能为空', trigger: 'change' },
           { max: 16, message: '角色名称不能大于16个字符', trigger: 'change' },
         ],
-        roleKey: [
-          { required: true, message: '权限字符不能为空', trigger: 'change' },
-        ],
+        roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'change' }],
         // roleSort: [
         //   { required: true, message: "角色顺序不能为空", trigger: "change" },
         //   {
@@ -280,7 +253,7 @@ export default {
     this.getList();
   },
   methods: {
-		triggerDialog() {
+    triggerDialog() {
       this.dialogVisible = !this.dialogVisible;
       console.log(this.dialogVisible);
     },
@@ -293,13 +266,11 @@ export default {
       const projectId = this.defaultParams.projectId;
       // console.log(this.defaultParams);
       this.loading = true;
-      modelApi
-        .getRoleList({projectId})
-        .then((response) => {
-          this.roleList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        });
+      modelApi.getRoleList({ projectId }).then((response) => {
+        this.roleList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
     },
     // 查询菜单树结构
     getMenuTreeselect() {
@@ -322,12 +293,10 @@ export default {
     },
     // 根据角色ID查询菜单树结构
     getRoleMenuTreeselect(roleId) {
-      return proRole
-        .roleMenuTreeselect(this.projectId, roleId)
-        .then((response) => {
-          this.menuOptions = response.menus;
-          return response;
-        });
+      return proRole.roleMenuTreeselect(this.projectId, roleId).then((response) => {
+        this.menuOptions = response.menus;
+        return response;
+      });
     },
     // 取消按钮
     cancel() {
@@ -414,7 +383,7 @@ export default {
     },
     // 编辑按钮操作
     handleUpdate(row) {
-			this.dialogOperate.visible = true;
+      this.dialogOperate.visible = true;
       this.reset();
       const roleId = row.roleId || this.ids;
       const roleMenu = this.getRoleMenuTreeselect(roleId);
@@ -472,8 +441,8 @@ export default {
       const roleIds = row.roleId || this.ids.join(',');
       const roleNames = row.roleName || this.roleNames;
       this.$confirm('确认删除角色 "' + roleNames + '"？', '移除', {
-          type: 'error',
-        })
+        type: 'error',
+      })
         .then(() => {
           this.$modal.loading('正在删除，请稍候...');
           proRole
@@ -498,7 +467,7 @@ export default {
         {
           ...this.queryParams,
         },
-        `role_${new Date().getTime()}.xlsx`
+        `role_${new Date().getTime()}.xlsx`,
       );
     },
     // 校验排序
@@ -532,4 +501,4 @@ export default {
     background-size: cover;
   }
 }
-</style>
+</style>

package/packages/components/model/components/props-panel.vue

@@ -2,11 +2,15 @@
   <div class="box-card" style="height: calc(100vh - 134px)">
     <div class="box-title">
       <span class="box-title-desc">属性</span>
-      <i class="el-icon-close box-title-close" style="cursor: pointer" @click="$emit('rightOperation', 'property')" />
+      <i
+        class="el-icon-close box-title-close"
+        style="cursor: pointer"
+        @click="$emit('rightOperation', 'property')"
+      />
     </div>
 
     <el-scrollbar>
-      <el-card class="" ref="card" id='box-card'>
+      <el-card class="" ref="card" id="box-card">
         <el-collapse class="property-box" v-model="activeNames">
           <el-collapse-item name="基本信息">
             <template slot="title">
@@ -15,7 +19,11 @@
               </div>
             </template>
             <div v-if="propDataLength">
-              <div v-for="(value, name, index) in propData" :key="index" class="text item info-item">
+              <div
+                v-for="(value, name, index) in propData"
+                :key="index"
+                class="text item info-item"
+              >
                 <p class="property-key" :title="name">{{ name }}</p>
                 <p class="property-value" :title="value">{{ value }}</p>
               </div>
@@ -28,7 +36,7 @@
   </div>
 </template>
 <script>
-import * as modelApi from '../api/index'
+import * as modelApi from '../api/index';
 export default {
   name: 'Details',
   // props: {
@@ -58,18 +66,18 @@ export default {
       docData: [],
       otherData: [],
       activeNames: ['基本信息'],
-    }
+    };
   },
   computed: {
     propDataLength() {
-      return Object.keys(this.propData).length
-    }
+      return Object.keys(this.propData).length;
+    },
   },
   methods: {
     // 通过entityId获取图元的属性 图元的id 项目的id
-    getModelProperty({propertyGroup, modelId}) {
-      const property = propertyGroup[modelId]
-      this.$set(this, 'propData', property ? property : {})
+    getModelProperty({ propertyGroup, modelId }) {
+      const property = propertyGroup[modelId];
+      this.$set(this, 'propData', property ? property : {});
       // modelApi.getModelProperty(params).then(res => {
       //   // if(this.lodash.isEmpty(res)) {
       //   //   this.$message({type: 'warning', message: '暂无属性数据'})
@@ -84,32 +92,32 @@ export default {
       //   // this.propData.splice(0)
       //   // this.docData.splice(0)
       //   // this.$message({type: 'error', message: err.msg})
-      // })  
+      // })
     },
     // 清空属性信息
     resetProperties() {
       // this.basicData.splice(0)
-      this.propData = {}
+      this.propData = {};
       // this.docData.splice(0)
     },
     // 预览
     handleView(data) {
-      const url = data.split(',')[0]
-      window.open(url)
+      const url = data.split(',')[0];
+      window.open(url);
       // window.open('http://view.officeapps.live.com/op/view.aspx?src='+ url)
-    }
+    },
   },
   destroyed() {
-    window.onresize = null
-  }
-}
+    window.onresize = null;
+  },
+};
 </script>
 <style lang="scss" scoped>
-.box-title{
+.box-title {
   font-size: 16px;
   // color: #fff;
 }
-.details-box{
+.details-box {
   // position: fixed;
   // height: calc(100% - 200px);
   width: 300px;
@@ -122,12 +130,12 @@ export default {
   box-sizing: border-box;
   z-index: 10;
 }
-.box-card{
+.box-card {
   padding-top: 0;
   padding-bottom: 0;
   background: #fff;
   width: 300px;
-  .box-title{
+  .box-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -136,114 +144,115 @@ export default {
     padding-left: 8px;
     padding-right: 8px;
     border-bottom: 1px solid #dfdfdf;
-    .box-title-desc{
+    .box-title-desc {
       font-size: 14px;
       font-weight: bold;
     }
-    .box-title-close{
+    .box-title-close {
       font-size: 24px;
     }
   }
 }
-#box-card{
+#box-card {
   border-bottom: none;
 }
-::v-deep .el-card__body{
+::v-deep .el-card__body {
   height: 100%;
   overflow: auto;
   padding: 0;
 }
-.title{
+.title {
   font-size: 16px;
 }
-::v-deep .el-collapse-item__content{
+::v-deep .el-collapse-item__content {
   padding-bottom: 0px;
 }
-.text{
+.text {
   font-size: 12px;
   // color: #fff;
 }
-.item{
+.item {
   padding: 5px;
-  span{
-    word-break: break-all
+  span {
+    word-break: break-all;
   }
 }
-.info-item{
+.info-item {
   display: grid;
-  grid-template-columns: 55% 45%
+  grid-template-columns: 55% 45%;
 }
-.property-box{
+.property-box {
   margin-bottom: 10px;
-  .title-content{
+  .title-content {
     padding-left: 10px;
   }
 }
-.property-title{
+.property-title {
   line-height: 24px;
   font-size: 14px;
   // color: #fff;
   border-bottom: 1px solid #fff;
   margin-bottom: 10px;
 }
-.empty-tips{
+.empty-tips {
   // color: #fff;
   text-align: center;
 }
-::v-deep .has-gutter{
+::v-deep .has-gutter {
   background: rgba(44, 76, 124, 0.2);
 }
-::v-deep .el-collapse{
+::v-deep .el-collapse {
   border-top: none;
 }
-::v-deep .el-collapse-item__header{
+::v-deep .el-collapse-item__header {
   height: 36px;
   line-height: 36px;
-  background: #F4F7FA;
+  background: #f4f7fa;
   // color: #fff;
   font-size: 14px;
 }
-::v-deep .el-collapse-item__wrap{
+::v-deep .el-collapse-item__wrap {
   padding: 0 10px;
   border-bottom: none;
   // background: rgba(30, 30, 30, 0.6);
 }
-::v-deep .el-collapse-item__arrow{
- margin: 0 20px 0 auto;
+::v-deep .el-collapse-item__arrow {
+  margin: 0 20px 0 auto;
 }
-.collapse-img{
+.collapse-img {
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
 }
-.doc-item{
+.doc-item {
   display: flex;
   flex-direction: row;
 }
-.doc-name{
+.doc-name {
   flex: 1;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.view-doc{
+.view-doc {
   width: 40px;
   text-align: center;
-  color: #3AFDFF;
+  color: #3afdff;
   cursor: pointer;
 }
-.property-key,.property-value{
+.property-key,
+.property-value {
   word-wrap: break-word;
   word-break: break-all;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
   margin: 0;
 }
-.property-value{
+.property-value {
   text-indent: 5px;
 }
-::v-deep .el-scrollbar{
+::v-deep .el-scrollbar {
   height: calc(100% - 53px);
 }
 </style>