项目管理

src/components/businessMoudle/projectManage/dialog/addProject.vue

@@ -5,6 +5,8 @@
           @confirm="confirmEvent"
           @close="dialogShow = false"
           width="800px"
+          height="calc(100vh - 220px)"
+          top="20px"
           :dialog-title="pageInfo.title">
     <template v-slot:content>
       <div class="dialogBox" v-loading="loading">
@@ -19,18 +21,45 @@
                 @changeEvent="init()" @clearEvent="init()"
                 :options="pageInfo.chargeList"/>
 
-        <div class="flex tMar20" style="justify-content: flex-start">
+        <div class="flex tMar20" style="align-items: flex-start">
           <span class="spanTitle f14" style="width: 80px;">项目负责人</span>
           <div>
-            <el-radio-group v-model="pageInfo.visibleVal">
-              <el-radio-button label="所有人可见" />
-              <el-radio-button label="指定成员可见" />
-            </el-radio-group>
-
-            <div class="treeBox">
-              <el-tree :data="pageInfo.treeList" :props="defaultProps" show-checkbox />
+            <div>
+              <RadioGroup :showTitle="false" :id="coverRadioList.EgName"
+                          :radioList="coverRadioList.list"
+                          :echoVal="coverRadioList.radioVal"
+                          :title="coverRadioList.name"
+                          @returnEvent="val=>{coverRadioList.radioVal = val}"></RadioGroup>
             </div>
+            <template v-show="coverRadioList.radioVal == 'appiont'">
+              <div class="cascader-container left">
+                <div class="cascader-title">
+                  <div class="tab-label active"> 部门 </div>
+                  <div class="tab-label"> 人员 </div>
+                </div>
+                <div class="cascader-list">
+                  <el-tree :data="pageInfo.treeList" :props="defaultProps" show-checkbox />
+                </div>
+                <div class="cascader-list member-parent">
+
+                </div>
 
+              </div>
+              <div class="cascader-container right">
+                <div class="cascader-title">
+                  <span>已选可见人员(4)</span>
+                  <span class="clear">清空</span>
+                </div>
+                <div class="cascader-list">
+                  <div class="choose-member">
+                    <p class="choose">
+                      <span class="ellipsis"></span><el-icon :size="14" color="#999" class="pointer"><i-ep-Close /></el-icon>
+                    </p>
+                  </div>
+                </div>
+
+              </div>
+            </template>
           </div>
         </div>
 
@@ -40,6 +69,7 @@
 
 </template>
 <script setup lang="ts">
+import RadioGroup from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/radioGroup.vue'
 import Select from '@/components/capsulationMoudle/_select.vue'
 import Dialog from '@/components/capsulationMoudle/_dialog.vue'
 import Input from '@/components/capsulationMoudle/_input.vue'
@@ -60,6 +90,25 @@ const defaultProps = {
   children: 'childs',
   label: 'name',
 }
+interface radioFace{
+  value:number | string,
+  name:string,
+  EgName:string,
+  radioVal:any,
+  haveNotes:boolean,
+  list:any
+}
+const coverRadioList = reactive<radioFace>({
+  value:1,
+  name:'项目负责人',
+  EgName:'cover',
+  radioVal:'all',
+  haveNotes:false,
+  list:[
+    {name:'所有人可见',value:'all'},
+    {name:'指定成员可见',value:'appiont'},
+  ]
+})
 
 //页面数据
 const pageInfo = reactive<reactiveTableAndAny>({
@@ -145,4 +194,312 @@ onMounted(()=>{
   border: 1px solid #EDEDED;
 
 }
+
+ .search-box {
+  display: block!important;
+  width: 400px;
+  margin-bottom: 10px
+}
+
+ .search-box .el-input__inner, .search-box .el-input__inner:focus {
+  border-color: #dcdfe6
+}
+
+.cascader-container {
+  display: inline-block;
+  vertical-align: top;
+  background-color: #fff;
+  border: 1px solid #dee4f5
+}
+
+.cascader-container.left {
+  width: 400px;
+  margin-right: 16px
+}
+
+.cascader-container.right {
+  width: 200px
+}
+
+.cascader-title {
+  height: 40px;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 40px;
+  color: #333;
+  background-color: #fafafa;
+  border-bottom: 1px solid #dee4f5
+}
+
+.cascader-title .tab-label {
+  cursor: pointer
+}
+
+.cascader-title .tab-label:first-child {
+  margin-right: 16px
+}
+
+.cascader-title .tab-label.active {
+  font-weight: 700;
+  color: #197afb;
+  border-bottom: 2px solid #197afb
+}
+
+.cascader-title .tab-label.is-hidden {
+  display: none
+}
+
+.clear {
+  float: right;
+  color: #598fe6;
+  text-decoration: none;
+  cursor: pointer
+}
+
+.cascader-list {
+  width: 100%;
+  height: 236px;
+  overflow: auto;
+  font-size: 14px
+}
+
+.depart-tree .el-tree-node {
+  padding: 0 10px;
+  margin-top: 10px
+}
+
+.depart-tree .el-tree-node__content,.depart-tree .el-upload-list__item {
+  background-color: transparent
+}
+
+.depart-tree .el-tree-node:focus>.el-tree-node__content {
+  width: 100%;
+  background-color: transparent
+}
+
+.choose-member {
+  padding: 3px 10px;
+  cursor: pointer
+}
+
+.choose-member .choose {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  color: #666;
+  background-color: #f2f3f6
+}
+
+.choose-member .choose .icon-right {
+  display: inline-block;
+  width: 15px;
+  height: 15px
+}
+
+.member-parent {
+  display: flex;
+  flex-direction: row
+}
+
+.member-parent .member-left {
+  box-sizing: border-box;
+  width: 200px;
+  height: 100%;
+  padding-top: 8px;
+  padding-right: 10px;
+  padding-left: 10px;
+  overflow: auto
+}
+
+.member-parent .member-right {
+  flex: 1;
+  height: 100%;
+  padding-top: 8px;
+  padding-right: 10px;
+  padding-left: 10px;
+  overflow: auto;
+  border-left: 1px solid #dee4f5
+}
+
+.member-parent .member-right .tipbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: #909399
+}
+
+.member-tree .custom-tree-node {
+  width: 100%;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.member-tree .custom-tree-node.active {
+  color: #197afb;
+  background-color: #f3f9ff;
+  border-radius: 3px
+}
+
+.member-tree .custom-tree-node .mg-icon-department,.member-tree .custom-tree-node .mg-icon-line {
+  margin-right: 6px;
+  font-size: 12px
+}
+
+.member-tree .custom-tree-node,.member-tree .el-tree-node__label {
+  overflow: hidden;
+  font-size: 14px;
+  text-indent: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.member-tree .el-tree-node__content {
+  height: 32px;
+  font-size: 14px;
+  line-height: 32px
+}
+
+.member-tree .el-tree-node__content:hover,.member-tree .el-upload-list__item:hover {
+  background-color: transparent
+}
+
+.member-tree .el-tree-node:focus>.el-tree-node__content {
+  width: 100%;
+  background-color: transparent
+}
+
+.member-tree .el-tree-node__content>.el-tree-node__expand-icon {
+  padding: 4px
+}
+
+.self-check .el-checkbox__label {
+  width: 100%;
+  font-size: 14px;
+  line-height: 32px
+}
+
+.display[data-v-7272e714] {
+  display: flex;
+  align-items: center
+}
+
+.hold[data-v-7272e714] {
+  width: 100%;
+  padding: 16px 0;
+  font-size: 12px;
+  color: #999;
+  text-align: center
+}
+
+.pricelimit[data-v-7272e714] {
+  padding: 6px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px
+}
+
+.pricelimit .pricelimit-list[data-v-7272e714] {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  font-size: 14px
+}
+
+.pricelimit .pricelimit-list .tab-select[data-v-7272e714] {
+  width: 170px;
+  margin: 0 8px
+}
+
+.pricelimit .pricelimit-list .delete-icon[data-v-7272e714] {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer
+}
+
+.pricelimit .addnew[data-v-7272e714] {
+  width: 100px;
+  font-size: 12px;
+  color: #197afb;
+  cursor: pointer
+}
+
+.pricelimit[data-v-7272e714] .el-form .el-form-item {
+  margin-bottom: 0!important
+}
+
+[data-v-1eec231b] .el-select .el-input__inner {
+  width: auto;
+  margin-left: 0
+}
+
+[data-v-1eec231b] .el-select .el-select__tags {
+  flex-wrap: nowrap
+}
+
+[data-v-1eec231b] .el-select .el-select__tags>span {
+  display: contents;
+  width: 100%
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag {
+  height: 32px;
+  overflow: hidden;
+  line-height: 32px;
+  background-color: transparent;
+  border: 0 none
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag .el-select__tags-text {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 14px;
+  color: #666;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-tag .el-tag__close {
+  display: none
+}
+
+[data-v-1eec231b] .el-select .el-select__tags .el-select__input {
+  height: 32px;
+  margin-left: 0;
+  line-height: 32px
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-input .el-input__inner {
+  height: 32px!important
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-select__tags .el-select__input {
+  margin-left: 15px
+}
+
+[data-v-1eec231b] .el-select.all-filter.el-select--small .el-input__suffix {
+  height: 32px
+}
+
+.disable-icon[data-v-1eec231b] {
+  float: right;
+  width: 45px;
+  height: 24px;
+  margin-top: 5px;
+  margin-right: 20px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #999;
+  text-align: center;
+  background-color: #e8eaec;
+  border-radius: 8px
+}
+
 </style>