SharedFile.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
  1. <template>
  2. <div class="sharedsile-all">
  3. <div style="color: red;margin-bottom: 5px;">文件类型与团组名称选择哪个就是上传到对应的类型和团组!!!</div>
  4. <div style="display: flex;justify-content: space-between;align-items: baseline;">
  5. <div class="sharedsile-Groups">
  6. <div class="sharedsile-Groups-li">
  7. <label>文件类型:</label>
  8. <el-select size="small" @change="QuerySharedFile" v-model="filetype" clearable filterable placeholder="团组选择"
  9. style="width: 150px;">
  10. <el-option v-for="item in filetypelist" :key="item.id" :label="item.name" :value="item.id">
  11. </el-option>
  12. </el-select>
  13. </div>
  14. <div v-if="filetype == 1412" class="sharedsile-Groups-li">
  15. <label>团组名称:</label>
  16. <el-select size="small" @change="QuerySharedFile" v-model="diIdselect" clearable filterable placeholder="团组选择"
  17. style="width: 300px;">
  18. <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
  19. :value="item.id">
  20. </el-option>
  21. </el-select>
  22. </div>
  23. </div>
  24. <div>
  25. <el-upload class="upload-demo" ref="upload" action="" :multiple="true" :on-change="handleChange"
  26. :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
  27. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  28. <el-button style="margin-left: 10px;" size="small" type="success"
  29. @click="submitUpload">上传到服务器</el-button>
  30. <div slot="tip" class="el-upload__tip">请不要上传过大的文件!</div>
  31. </el-upload>
  32. </div>
  33. </div>
  34. <div class="share-table">
  35. <div style="margin-bottom: 8px;">
  36. <el-date-picker
  37. size="small"
  38. v-model="shdatetime"
  39. type="daterange"
  40. range-separator="至"
  41. start-placeholder="开始日期"
  42. end-placeholder="结束日期">
  43. </el-date-picker>
  44. <el-input size="small" v-model="fileName" placeholder="请输入文件名称搜索" style="width: 300px; margin-right: 10px;"
  45. clearable @clear="handleSearch"></el-input>
  46. <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
  47. </div>
  48. <el-table :data="tabledata" border style="width: 100%">
  49. <el-table-column prop="fileName" label="文件名称">
  50. </el-table-column>
  51. <el-table-column prop="createTime" label="上传时间" width="180">
  52. </el-table-column>
  53. <el-table-column label="操作" width="200">
  54. <template slot-scope="scope">
  55. <el-button size="mini" @click="Downloadshare(scope.row)" type="primary">下载</el-button>
  56. <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
  57. </template>
  58. </el-table-column>
  59. </el-table>
  60. <el-pagination style="margin-top: 20px; text-align: center;" background
  61. layout="prev, pager, next, sizes, total" :current-page="currentPage" :page-size="pageSize"
  62. :page-sizes="[1, 5, 10, 15]" :total="total" @current-change="handlePageChange"
  63. @size-change="handleSizeChange">
  64. </el-pagination>
  65. </div>
  66. <div v-if="filetype == 1412" class="sharedsile-ps">PS:请先选择团组再下载!</div>
  67. <div v-if="filetype == 1412" class="sharedsile-table">
  68. <div class="sharedsile-table-tr">
  69. <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-name">文件名称
  70. </div>
  71. <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-type">版本格式
  72. </div>
  73. <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-Language">语言
  74. </div>
  75. <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-download">操作
  76. </div>
  77. </div>
  78. <div class="sharedsile-table-tr">
  79. <div class="sharedsile-table-tb tb-name">OP行程单</div>
  80. <div class="sharedsile-table-tb tb-type">WORD</div>
  81. <div class="sharedsile-table-tb tb-Language">中文</div>
  82. <div class="sharedsile-table-tb tb-download">
  83. <el-button size="small" @click="dcwzxc(0)" type="primary">下载</el-button>
  84. </div>
  85. </div>
  86. <div class="sharedsile-table-tr">
  87. <div class="sharedsile-table-tb tb-name">OP行程单</div>
  88. <div class="sharedsile-table-tb tb-type">PDF</div>
  89. <div class="sharedsile-table-tb tb-Language">中文</div>
  90. <div class="sharedsile-table-tb tb-download">
  91. <el-button size="small" @click="dcwzxc(1)" type="primary">下载</el-button>
  92. </div>
  93. </div>
  94. <div class="sharedsile-table-tr">
  95. <div class="sharedsile-table-tb tb-name">团组名单</div>
  96. <div class="sharedsile-table-tb tb-type">WORD</div>
  97. <div class="sharedsile-table-tb tb-Language">中文</div>
  98. <div class="sharedsile-table-tb tb-download">
  99. <el-button size="small" @click="Exportlist(0)" type="primary">下载</el-button>
  100. </div>
  101. </div>
  102. <div class="sharedsile-table-tr">
  103. <div class="sharedsile-table-tb tb-name">团组名单</div>
  104. <div class="sharedsile-table-tb tb-type">WORD</div>
  105. <div class="sharedsile-table-tb tb-Language">英文</div>
  106. <div class="sharedsile-table-tb tb-download">
  107. <el-button size="small" @click="Exportlist(1)" type="primary">下载</el-button>
  108. </div>
  109. </div>
  110. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  111. <div class="sharedsile-table-tb tb-name">倒推表</div>
  112. <div class="sharedsile-table-tb tb-type">WORD</div>
  113. <div class="sharedsile-table-tb tb-Language">中文</div>
  114. <div class="sharedsile-table-tb tb-download">
  115. <el-button size="small" @click="PostInvertedListFileDownload" type="primary">下载</el-button>
  116. </div>
  117. </div>
  118. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  119. <div class="sharedsile-table-tb tb-name">出国出境经费审核计算明细</div>
  120. <div class="sharedsile-table-tb tb-type">WORD</div>
  121. <div class="sharedsile-table-tb tb-Language">中文</div>
  122. <div class="sharedsile-table-tb tb-download">
  123. <el-button size="small" @click="eptschedule(1, 1005)" type="primary">下载</el-button>
  124. </div>
  125. </div>
  126. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  127. <div class="sharedsile-table-tb tb-name">因公出国(境)经费测算明细表</div>
  128. <div class="sharedsile-table-tb tb-type">WORD</div>
  129. <div class="sharedsile-table-tb tb-Language">中文</div>
  130. <div class="sharedsile-table-tb tb-download">
  131. <el-button size="small" @click="eptschedule(1, 1006)" type="primary">下载</el-button>
  132. </div>
  133. </div>
  134. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  135. <div class="sharedsile-table-tb tb-name">四川省商务厅出国经费财政先行审核表</div>
  136. <div class="sharedsile-table-tb tb-type">EXCEL</div>
  137. <div class="sharedsile-table-tb tb-Language">中文</div>
  138. <div class="sharedsile-table-tb tb-download">
  139. <el-button size="small" @click="eptschedule(1, 1007)" type="primary">下载</el-button>
  140. </div>
  141. </div>
  142. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  143. <div class="sharedsile-table-tb tb-name">成都市因公临时出国任务和预算审批意见表(外专培训团专用)</div>
  144. <div class="sharedsile-table-tb tb-type">WORD</div>
  145. <div class="sharedsile-table-tb tb-Language">中文</div>
  146. <div class="sharedsile-table-tb tb-download">
  147. <el-button size="small" @click="eptschedule(1, 1066)" type="primary">下载</el-button>
  148. </div>
  149. </div>
  150. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  151. <div class="sharedsile-table-tb tb-name">派员单位出(境)任务和预算审批意见表</div>
  152. <div class="sharedsile-table-tb tb-type">WORD</div>
  153. <div class="sharedsile-table-tb tb-Language">中文</div>
  154. <div class="sharedsile-table-tb tb-download">
  155. <el-button size="small" @click="eptschedule(2, 1008)" type="primary">下载</el-button>
  156. </div>
  157. </div>
  158. <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
  159. <div class="sharedsile-table-tb tb-name">省级单位出(境)经费报销单</div>
  160. <div class="sharedsile-table-tb tb-type">WORD</div>
  161. <div class="sharedsile-table-tb tb-Language">中文</div>
  162. <div class="sharedsile-table-tb tb-download">
  163. <el-button size="small" @click="eptschedule(2, 1009)" type="primary">下载</el-button>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </template>
  169. <script>
  170. export default {
  171. data() {
  172. return {
  173. diIdselect: '',
  174. delegationInfoList: [],
  175. filetype: '',
  176. filetypelist: [],
  177. pageloadData: {
  178. "portType": 1,
  179. "pageIndex": 1,
  180. "pageSize": 10,
  181. "contact": "",
  182. "location": "",
  183. "client": "",
  184. "userid": "",
  185. "lvlid": 0,
  186. "business": "",
  187. "Range": 0,
  188. "Category": 0,
  189. "operationUserId": 0
  190. },
  191. token: '',
  192. pageId: '',
  193. userId: '',
  194. fileList: [],
  195. tabledata: [],
  196. currentPage: 1, // 当前页码
  197. pageSize: 5, // 每页显示条数
  198. total: 0, // 总条数
  199. isMarketingDepartment:false,
  200. fileName:'',
  201. shdatetime:[],
  202. }
  203. },
  204. methods: {
  205. //处理时间
  206. disposeTime(val){
  207. var date = new Date(val);
  208. var y = date.getFullYear();
  209. var m = date.getMonth() + 1;
  210. m = m < 10 ? ('0' + m) : m;
  211. var d = date.getDate();
  212. d = d < 10 ? ('0' + d) : d;
  213. let time = y + '-' + m + '-' + d;
  214. return time
  215. },
  216. //基础数据
  217. SharedFileInit() {
  218. var url = "/api/Groups/SharedFileInit?userid="+this.userId+"&portType=1"
  219. var that = this
  220. this.$axios({
  221. method: 'get',
  222. url: url,
  223. }).then(function (res) {
  224. if (res.data.code == 200) {
  225. that.delegationInfoList = res.data.data.dropDownGroupList;
  226. that.diIdselect = that.delegationInfoList[0].id;
  227. that.filetypelist = res.data.data.dropDownType;
  228. that.filetype = that.filetypelist[0].id;
  229. that.isMarketingDepartment=res.data.data.isMarketingDepartment;
  230. that.QuerySharedFile();
  231. } else {
  232. that.$message.error(res.data.msg);
  233. }
  234. })
  235. },
  236. handleSearch(){
  237. console.log(this.shdatetime);
  238. this.QuerySharedFile();
  239. },
  240. //页面加载
  241. padeload() {
  242. var url = "/api/Business/PostGroupNameScreen"
  243. var that = this
  244. this.$axios({
  245. method: 'post',
  246. url: url,
  247. headers: {
  248. Authorization: 'Bearer ' + this.token
  249. },
  250. data: {
  251. portType: 1,
  252. pageIndex: 1,
  253. pageSize: 9000,
  254. groupName: '',
  255. userId: that.userId == 21 ? -1 : that.userId,
  256. }
  257. }).then(function (res) {
  258. console.log(res)
  259. if (res.data.code == 200) {
  260. that.delegationInfoList = res.data.data;
  261. that.diIdselect = that.delegationInfoList[0].id;
  262. } else {
  263. that.$message.error(res.data.msg);
  264. }
  265. })
  266. },
  267. //文件列表
  268. QuerySharedFile() {
  269. if (this.shdatetime==null) {
  270. this.shdatetime=[]
  271. }
  272. var url = "/api/Groups/QuerySharedFile"
  273. var that = this
  274. this.$axios({
  275. method: 'post',
  276. url: url,
  277. headers: {
  278. Authorization: 'Bearer ' + this.token
  279. },
  280. data: {
  281. pageIndex: that.currentPage,
  282. pageSize: that.pageSize,
  283. fileType: that.filetype,
  284. diid: that.filetype != 1412 ? 0 : that.diIdselect==""?0:that.diIdselect,
  285. fileName:that.fileName,
  286. startTime:that.shdatetime.length!=0?that.disposeTime(that.shdatetime[0]):"",
  287. endTime:that.shdatetime.length!=0?that.disposeTime(that.shdatetime[1]):"",
  288. }
  289. }).then(function (res) {
  290. if (res.data.code == 200) {
  291. that.tabledata = res.data.data.fileList;
  292. that.total = res.data.data.totalCount;
  293. } else {
  294. that.$message.error(res.data.msg);
  295. }
  296. })
  297. },
  298. // 分页页码改变事件
  299. handlePageChange(val) {
  300. this.currentPage = val; // 更新当前页码
  301. this.QuerySharedFile(); // 重新查询数据
  302. },
  303. // 每页显示条数改变事件
  304. handleSizeChange(val) {
  305. this.pageSize = val; // 更新每页显示条数
  306. this.currentPage = 1; // 重置当前页码
  307. this.QuerySharedFile(); // 重新查询数据
  308. },
  309. //ctable获取团组
  310. PostGroupListByCTableAndUserId() {
  311. var url = "/api/Business/PostGroupListByCTableAndUserId"
  312. var that = this
  313. this.$axios({
  314. method: 'post',
  315. url: url,
  316. headers: {
  317. Authorization: 'Bearer ' + this.token
  318. },
  319. data: {
  320. portType: 1,
  321. pageIndex: 1,
  322. pageSize: 9000,
  323. cTable: 1081,
  324. userId: that.userId,
  325. teamName: "",
  326. }
  327. }).then(function (res) {
  328. if (res.data.code == 200) {
  329. that.delegationInfoList = res.data.data;
  330. that.diIdselect = that.delegationInfoList[0].id;
  331. } else {
  332. that.$message.error(res.data.msg);
  333. }
  334. })
  335. },
  336. //导出完整行程
  337. dcwzxc(val) {
  338. var url = "/api/Groups/ExportTravel"
  339. var that = this
  340. this.$axios({
  341. method: 'post',
  342. url: url,
  343. headers: {
  344. Authorization: 'Bearer ' + that.token
  345. },
  346. data: {
  347. diid: that.diIdselect,
  348. isPDF: val
  349. }
  350. }).then(function (res) {
  351. if (res.data.code == 200) {
  352. that.$message({
  353. message: res.data.msg,
  354. type: 'success',
  355. offset: 50
  356. });
  357. window.open(res.data.data.replace('C:/Server/File/OA2023/', 'http://132.232.92.186:24/'));
  358. } else {
  359. that.$message.error(res.data.msg);
  360. }
  361. }).catch(function (error) {
  362. that.$message.error(error);
  363. });
  364. },
  365. //团组名单
  366. Exportlist(val) {
  367. var url = "/api/Groups/PostTourClientListDownloadFile"
  368. var that = this
  369. this.$axios({
  370. method: 'post',
  371. url: url,
  372. headers: {
  373. Authorization: 'Bearer ' + this.token
  374. },
  375. data: {
  376. portType: 1,
  377. userId: that.userId,
  378. pageId: that.pageId,
  379. diId: that.diIdselect,
  380. language: val
  381. }
  382. }).then(function (res) {
  383. console.log(res)
  384. if (res.data.code == 200) {
  385. window.location.href = res.data.data
  386. that.$message({
  387. type: 'success',
  388. message: res.data.msg
  389. });
  390. } else {
  391. that.$message.error(res.data.msg);
  392. }
  393. }).catch(function (error) {
  394. that.$message.error("下载失败!");
  395. });
  396. },
  397. //导出倒推表
  398. PostInvertedListFileDownload() {
  399. var url = "/api/Groups/PostInvertedListFileDownload"
  400. var that = this
  401. this.$axios({
  402. method: 'post',
  403. url: url,
  404. headers: {
  405. Authorization: 'Bearer ' + that.token
  406. },
  407. data: {
  408. portType: 1,
  409. diId: that.diIdselect
  410. }
  411. }).then(function (res) {
  412. if (res.data.code == 200) {
  413. that.$message({
  414. message: res.data.msg,
  415. type: 'success',
  416. offset: 50
  417. });
  418. window.open(res.data.data);
  419. } else {
  420. that.$message.error(res.data.msg);
  421. }
  422. }).catch(function (error) {
  423. that.$message.error(error);
  424. });
  425. },
  426. //三公导出
  427. eptschedule(val1, val2) {
  428. var url = "/api/Groups/PostEnterExitCostDownload"
  429. var that = this
  430. this.$axios({
  431. method: 'post',
  432. url: url,
  433. headers: {
  434. Authorization: 'Bearer ' + this.token
  435. },
  436. data: {
  437. portType: 1,
  438. diId: that.diIdselect,
  439. exportType: val1,
  440. subTypeId: val2
  441. }
  442. }).then(function (res) {
  443. console.log(res)
  444. if (res.data.code == 200) {
  445. that.$message({
  446. type: 'success',
  447. message: res.data.msg
  448. });
  449. window.open(res.data.data.url);
  450. } else {
  451. that.$message.error(res.data.msg);
  452. }
  453. })
  454. },
  455. // 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
  456. handleChange(file, fileList) {
  457. // if (fileList.length > 1 && fileList.status !== "fail") {
  458. // fileList.splice(0, 1);
  459. // } else if (fileList.status === "fail") {
  460. // errorMsg("上传失败,请重新上传!");
  461. // fileList.splice(0, 1);
  462. // }
  463. this.fileList = fileList
  464. },
  465. //上传服务器
  466. submitUpload() {
  467. var verdict = false
  468. //判断是否有文件再上传
  469. console.log(this.fileList);
  470. if (this.fileList.length === 0) {
  471. return this.$message.warning('请选取文件后再上传!');
  472. }
  473. // 下面的代码将创建一个空的FormData对象:
  474. const formData = new FormData()
  475. // 你可以使用FormData.append来添加键/值对到表单里面;
  476. this.fileList.forEach((file) => {
  477. if (file.raw != undefined) {
  478. verdict = true;
  479. formData.append('Files', file.raw);
  480. }
  481. })
  482. formData.append('Diid', this.filetype != 1412 ? 0 : this.diIdselect);
  483. formData.append('Userid', this.userId);
  484. formData.append('FileType', this.filetype);
  485. if (!verdict) {
  486. return
  487. }
  488. var that = this;
  489. var url = "/api/Groups/SharedFileUpload"
  490. this.$axios({
  491. method: 'post',
  492. url: url,
  493. headers: {
  494. Authorization: 'Bearer ' + that.token
  495. },
  496. data: formData
  497. }).then(function (res) {
  498. if (res.data.code == 200) {
  499. that.clearFileList(); // 上传成功后清空文件列表
  500. that.QuerySharedFile();
  501. that.$message.success(res.data.msg);
  502. // window.open(res.data.data.url)
  503. } else {
  504. that.$message.error(res.data.msg);
  505. }
  506. })
  507. },
  508. // 清空文件列表
  509. clearFileList() {
  510. this.$refs.upload.clearFiles(); // 调用 el-upload 的 clearFiles 方法
  511. this.fileList = []; // 清空本地文件列表
  512. },
  513. handleRemove(file, fileList) {
  514. console.log(file, fileList);
  515. },
  516. handlePreview(file) {
  517. console.log(file);
  518. },
  519. Downloadshare(val) {
  520. window.open(val.filePath)
  521. },
  522. handleDelete(val) {
  523. this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  524. confirmButtonText: '确定',
  525. cancelButtonText: '取消',
  526. type: 'warning'
  527. }).then(() => {
  528. var url = "/api/Groups/DeleteSharedFile"
  529. var that = this
  530. this.$axios({
  531. method: 'post',
  532. url: url,
  533. headers: {
  534. Authorization: 'Bearer '
  535. },
  536. data:{
  537. id: val.id,
  538. userId: that.userId,
  539. }
  540. }).then(function (res) {
  541. if(res.data.code==200){
  542. that.$message({
  543. message:res.data.msg ,
  544. type: 'success',
  545. });
  546. that.QuerySharedFile();
  547. }else{
  548. that.$message({
  549. message:res.data.msg ,
  550. type: 'warning',
  551. });
  552. }
  553. })
  554. }).catch(() => {
  555. this.$message({
  556. type: 'info',
  557. message: '已取消删除'
  558. });
  559. });
  560. }
  561. },
  562. created() {
  563. this.token = JSON.parse(localStorage.getItem('userinif')).token;
  564. this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
  565. this.pageId = Number(localStorage.getItem('indexs').split('-')[1]);//页面id
  566. // this.PostGroupListByCTableAndUserId()
  567. this.SharedFileInit();
  568. }
  569. }
  570. </script>
  571. <style>
  572. .sharedsile-all {
  573. background-color: #fff;
  574. padding: 20px;
  575. box-shadow: 0 0 5px #0005;
  576. border-radius: 10px;
  577. min-height: 810px;
  578. }
  579. .sharedsile-Groups {
  580. display: flex;
  581. flex-wrap: wrap;
  582. }
  583. .sharedsile-btn {
  584. width: 200px;
  585. }
  586. .sharedsile-table-tr {
  587. display: flex;
  588. }
  589. .sharedsile-ps {
  590. margin-top: 20px;
  591. font-size: 14px;
  592. }
  593. .sharedsile-table {
  594. max-height: 700px;
  595. border-bottom: 1px solid #DCDFE6;
  596. overflow: hidden;
  597. overflow: auto;
  598. }
  599. .sharedsile-table-tr {
  600. border-top: 1px solid #DCDFE6;
  601. }
  602. .sharedsile-table-tb {
  603. padding: 10px;
  604. text-align: center;
  605. border-left: 1px solid #DCDFE6;
  606. font-size: 14px;
  607. color: #555;
  608. display: flex;
  609. justify-content: center;
  610. align-items: center;
  611. }
  612. .sharedsile-table-tb:last-child {
  613. border-right: 1px solid #DCDFE6;
  614. }
  615. .tb-name {
  616. width: 40%;
  617. }
  618. .tb-type {
  619. width: 25%;
  620. }
  621. .tb-Language {
  622. width: 25%;
  623. }
  624. .tb-download {
  625. width: 10%;
  626. }
  627. .sharedsile-Groups-li {
  628. display: flex;
  629. align-items: center;
  630. margin-right: 10px;
  631. }
  632. .sharedsile-Groups-li label {
  633. width: 60px;
  634. }
  635. .share-table {
  636. margin-top: 10px;
  637. }
  638. </style>