schoolList.vue 63 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985
  1. <template>
  2. <div class="list_container">
  3. <div class="title_examine">
  4. <div class="pub_title">学校列表</div>
  5. <div style="margin-left: auto">
  6. <el-input v-model="checkOid" placeholder="请输入学校" size="normal" clearable @change="changeOid"
  7. style="margin-right: 10px; width: 200px"></el-input>
  8. <el-input v-model="checkOrg" placeholder="请输入组织" size="normal" clearable @change="changeOrg"
  9. style="margin-right: 10px; width: 200px"></el-input>
  10. <el-select v-model="checkArea" placeholder="选择区域" clearable filterable @change="changeArea"
  11. style="margin-right: 10px">
  12. <el-option v-for="item in regionCList" :key="item.id" :label="item.name" :value="item.name">
  13. </el-option>
  14. </el-select>
  15. <el-button type="primary" size="small" @click="add_school_dialog = true">新增学校</el-button>
  16. </div>
  17. </div>
  18. <div class="tableBox">
  19. <el-table :data="schoolData" stripe border style="width: 100%" :header-cell-style="headerCellStyle">
  20. <el-table-column show-overflow-tooltip prop="name" label="学校名称" min-width="45"></el-table-column>
  21. <el-table-column show-overflow-tooltip prop="org_name" label="组织" min-width="45">
  22. <template slot-scope="scope">
  23. {{ scope.row.org_name || "-" }}
  24. <!-- 如果 org 为空,显示 '-' -->
  25. </template>
  26. </el-table-column>
  27. <el-table-column show-overflow-tooltip prop="org_code" label="组织编码" min-width="45">
  28. <template slot-scope="scope">
  29. {{ scope.row.org_code || "-" }}
  30. <!-- 如果 org 为空,显示 '-' -->
  31. </template>
  32. </el-table-column>
  33. <el-table-column show-overflow-tooltip prop="code" label="编码" min-width="45">
  34. <template slot-scope="scope">
  35. {{ scope.row.code || "-" }}
  36. <!-- 如果 org 为空,显示 '-' -->
  37. </template>
  38. </el-table-column>
  39. <el-table-column show-overflow-tooltip prop="code" label="随机码" min-width="45">
  40. <template slot-scope="scope">
  41. {{ scope.row.code2 || "-" }}
  42. <!-- 如果 org 为空,显示 '-' -->
  43. </template>
  44. </el-table-column>
  45. <el-table-column show-overflow-tooltip prop="detail" label="描述" min-width="45">
  46. <template slot-scope="scope">
  47. {{ scope.row.detail || '-' }} <!-- 如果 org 为空,显示 '-' -->
  48. </template>
  49. </el-table-column>
  50. <el-table-column show-overflow-tooltip prop="area" label="区域" min-width="45"></el-table-column>
  51. <el-table-column show-overflow-tooltip prop="ctime" label="创建时间" min-width="45"></el-table-column>
  52. <el-table-column label="是否禁用/使用期限" min-width="45">
  53. <template #default="scope">
  54. <span v-if="scope.row.isLogin === '1' || scope.row.isLogin === 'null' || scope.row.isLogin === ''">启用</span>
  55. <span v-else-if="scope.row.isLogin === '2'">禁用</span>
  56. <span v-else>{{ scope.row.isLogin }}</span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="操作" width="420px">
  60. <template slot-scope="scope">
  61. <div class="operate">
  62. <button @click="update(scope.row)">编辑</button>
  63. <button @click="enable(scope.row,'enable')">
  64. {{ scope.row.isLogin === '2' ? '启用' : '禁用' }}
  65. </button>
  66. <button v-if="scope.row.isLogin !== '2'"
  67. @click="open_enable_school(scope.row, 'useDate')">/&nbsp;使用期限</button>
  68. <button @click="toPage(scope.row)">批量创建</button>
  69. <button @click="permissionSetting(scope.row)"
  70. v-show="!unShowJurUser.includes(userid)">权限设置</button>
  71. <button @click="addcommunityL(scope.row)">添加社区</button>
  72. <!-- <button @click="opengradia(scope.row.id)">年级管理</button> -->
  73. <button @click="delete_school(scope.row)" style="color: red">
  74. 删除
  75. </button>
  76. </div>
  77. </template>
  78. </el-table-column>
  79. </el-table>
  80. </div>
  81. <!-- 分页组件 -->
  82. <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
  83. @current-change="handlePageChange" layout="total,prev, pager, next, jumper">
  84. </el-pagination>
  85. <!-- 新增学校弹窗 -->
  86. <el-dialog title="新增学校" class="table" :visible.sync="add_school_dialog" :before-close="close_add_school"
  87. width="700px">
  88. <div class="el_dialog_school_content">
  89. <form class="el-form">
  90. <!-- 学校名称 -->
  91. <div class="el-form-item" style="margin-top: 15px">
  92. <label class="el-form-item__label" style="width: 100px">学校名称</label>
  93. <div class="el-form-item__content" style="margin-left: 5px">
  94. <span>
  95. <div class="add_input el-input el-input--suffix">
  96. <input v-model="sch_name" type="text" autocomplete="off" placeholder="学校名称"
  97. class="el-input__inner" />
  98. </div>
  99. </span>
  100. </div>
  101. </div>
  102. <!-- 地区 -->
  103. <div class="el-form-item">
  104. <label class="el-form-item__label" style="width: 100px">地区</label>
  105. <div class="el-form-item__content" style="margin-left: 5px">
  106. <span>
  107. <div class="add_input el-input el-input--suffix">
  108. <input v-model="region" type="text" autocomplete="off" placeholder="请输入地区"
  109. class="el-input__inner" />
  110. </div>
  111. </span>
  112. </div>
  113. </div>
  114. <!-- 学校编码 -->
  115. <div class="el-form-item">
  116. <label class="el-form-item__label" style="width: 100px">学校编码</label>
  117. <div class="el-form-item__content" style="margin-left: 5px">
  118. <span>
  119. <div class="add_input el-input el-input--suffix">
  120. <input v-model="schoolCode" type="text" autocomplete="off" placeholder="请输入编码"
  121. class="el-input__inner" />
  122. </div>
  123. </span>
  124. </div>
  125. </div>
  126. <!-- 学校随机码 -->
  127. <div class="el-form-item">
  128. <label class="el-form-item__label" style="width: 100px">随机码</label>
  129. <div class="el-form-item__content" style="margin-left: 5px">
  130. <span>
  131. <div class="add_input el-input el-input--suffix">
  132. <input v-model="schoolCode2" type="text" autocomplete="off" placeholder="请输入随机码"
  133. class="el-input__inner" />
  134. </div>
  135. </span>
  136. </div>
  137. </div>
  138. <div class="el-form-item">
  139. <label class="el-form-item__label" style="width: 100px">上级组织</label>
  140. <div class="el-form-item__content" style="margin-left: 5px">
  141. <span>
  142. <div class="add_input el-input el-input--suffix">
  143. <el-form :model="school" ref="form">
  144. <el-select v-model="school.parentOrgId" placeholder="请选择组织"
  145. class="custom-select" filterable>
  146. <el-option v-for="(org, index) in organizations" :key="index"
  147. :label="org.name" :value="org.id">
  148. {{ org.name }}
  149. </el-option>
  150. </el-select>
  151. </el-form>
  152. </div>
  153. </span>
  154. </div>
  155. </div>
  156. <!-- 描述 -->
  157. <div class="el-form-item">
  158. <label class="el-form-item__label" style="width: 100px">描述</label>
  159. <div class="el-form-item__content" style="margin-left: 5px">
  160. <span>
  161. <div class="add_input el-input el-input--suffix">
  162. <input v-model="schoolDetail" type="text" autocomplete="off" placeholder="请输入描述"
  163. class="el-input__inner" />
  164. </div>
  165. </span>
  166. </div>
  167. </div>
  168. <!-- 区域 -->
  169. <div class="el-form-item">
  170. <label class="el-form-item__label" style="width: 100px">区域</label>
  171. <div class="el-form-item__content" style="margin-left: 5px">
  172. <span>
  173. <div class="add_input el-input el-input--suffix">
  174. <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
  175. <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name"
  176. :value="org.name">
  177. {{ org.name }}
  178. </el-option>
  179. </el-select>
  180. </div>
  181. </span>
  182. </div>
  183. </div>
  184. <!-- 年级 -->
  185. <!-- <div class="flexcol">
  186. <div style="display: flex;gap: 15px;">
  187. <span>年级</span>
  188. <el-checkbox :indeterminate="graisInde" v-model="gracheckAll" @change="handleCheckAllChange">全选</el-checkbox>
  189. </div>
  190. <div>
  191. <el-checkbox-group v-model="checkedGra" @change="hangraChange">
  192. <el-checkbox v-for="city in gralist" :label="city" :key="city">{{city}}</el-checkbox>
  193. </el-checkbox-group>
  194. </div>
  195. </div> -->
  196. </form>
  197. </div>
  198. <!-- 按钮区域 -->
  199. <div slot="footer" class="el-dialog__footer">
  200. <el-button @click="close_add_school">取 消</el-button>
  201. <el-button type="primary" @click="ajax_add_school">确认</el-button>
  202. </div>
  203. </el-dialog>
  204. <!-- 修改学校弹窗 -->
  205. <el-dialog title="修改学校" class="table" :visible.sync="add_school_dialog2" :before-close="close_add_school2"
  206. width="700px">
  207. <div class="el_dialog_school_content">
  208. <form class="el-form">
  209. <!-- 学校名称 -->
  210. <div class="el-form-item" style="margin-top: 15px">
  211. <label class="el-form-item__label" style="width: 100px">学校名称</label>
  212. <div class="el-form-item__content" style="margin-left: 5px">
  213. <span>
  214. <div class="add_input el-input el-input--suffix">
  215. <input v-model="sch_name" type="text" autocomplete="off" placeholder="学校名称"
  216. class="el-input__inner" />
  217. </div>
  218. </span>
  219. </div>
  220. </div>
  221. <!-- 地区 -->
  222. <div class="el-form-item">
  223. <label class="el-form-item__label" style="width: 100px">地区</label>
  224. <div class="el-form-item__content" style="margin-left: 5px">
  225. <span>
  226. <div class="add_input el-input el-input--suffix">
  227. <input v-model="region" type="text" autocomplete="off" placeholder="请输入地区"
  228. class="el-input__inner" />
  229. </div>
  230. </span>
  231. </div>
  232. </div>
  233. <!-- 学校编码 -->
  234. <div class="el-form-item">
  235. <label class="el-form-item__label" style="width: 100px">学校编码</label>
  236. <div class="el-form-item__content" style="margin-left: 5px">
  237. <span>
  238. <div class="add_input el-input el-input--suffix">
  239. <input v-model="schoolCode" type="text" autocomplete="off" placeholder="请输入编码"
  240. class="el-input__inner" />
  241. </div>
  242. </span>
  243. </div>
  244. </div>
  245. <!-- 学校随机码 -->
  246. <div class="el-form-item">
  247. <label class="el-form-item__label" style="width: 100px">学校随机码</label>
  248. <div class="el-form-item__content" style="margin-left: 5px">
  249. <span>
  250. <div class="add_input el-input el-input--suffix">
  251. <input v-model.trim="schoolCode2" type="text" autocomplete="off" placeholder="请输入随机码"
  252. class="el-input__inner" />
  253. </div>
  254. </span>
  255. </div>
  256. </div>
  257. <div class="el-form-item">
  258. <label class="el-form-item__label" style="width: 100px">上级组织</label>
  259. <div class="el-form-item__content" style="margin-left: 5px">
  260. <span>
  261. <div class="add_input el-input el-input--suffix">
  262. <el-form :model="school" ref="form">
  263. <el-select v-model="school.parentOrgId" clearable placeholder="请选择组织"
  264. class="custom-select" filterable>
  265. <el-option v-for="(org, index) in organizations" :key="index"
  266. :label="org.name" :value="org.id">
  267. {{ org.name }}
  268. </el-option>
  269. </el-select>
  270. </el-form>
  271. </div>
  272. </span>
  273. </div>
  274. </div>
  275. <!-- 描述 -->
  276. <div class="el-form-item">
  277. <label class="el-form-item__label" style="width: 100px">描述</label>
  278. <div class="el-form-item__content" style="margin-left: 5px">
  279. <span>
  280. <div class="add_input el-input el-input--suffix">
  281. <input v-model="schoolDetail" type="text" autocomplete="off" placeholder="请输入描述"
  282. class="el-input__inner" />
  283. </div>
  284. </span>
  285. </div>
  286. </div>
  287. <!-- 区域 -->
  288. <div class="el-form-item">
  289. <label class="el-form-item__label" style="width: 100px">区域</label>
  290. <div class="el-form-item__content" style="margin-left: 5px">
  291. <span>
  292. <div class="add_input el-input el-input--suffix">
  293. <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
  294. <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name"
  295. :value="org.name">
  296. {{ org.name }}
  297. </el-option>
  298. </el-select>
  299. </div>
  300. </span>
  301. </div>
  302. </div>
  303. </form>
  304. </div>
  305. <!-- 按钮区域 -->
  306. <div slot="footer" class="el-dialog__footer">
  307. <el-button @click="close_add_school2">取 消</el-button>
  308. <el-button type="primary" @click="updateSchool()">确认</el-button>
  309. </div>
  310. </el-dialog>
  311. <!-- 启用弹窗 -->
  312. <el-dialog :title="enableDiaTitle" class="table" :visible.sync="enable_school_dialog" :before-close="close_enable_school"
  313. width="700px">
  314. <div class="el_dialog_org_content">
  315. <form class="el-form">
  316. <!-- 使用期限 -->
  317. <div class="el-form-item">
  318. <label class="el-form-item__label">使用期限</label>
  319. <div class="el-form-item__content">
  320. <el-date-picker v-model="useDate" format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd"
  321. placeholder="请选择使用期限" />
  322. </div>
  323. </div>
  324. </form>
  325. </div>
  326. <!-- 按钮区域 -->
  327. <div slot="footer" class="dialog-footer">
  328. <el-button @click="close_enable_school">取 消</el-button>
  329. <el-button type="primary" @click="enable_school">确认</el-button>
  330. </div>
  331. </el-dialog>
  332. <el-dialog
  333. :title="`${cyInfo.name}社区列表`"
  334. :visible.sync="dialogcommunity"
  335. width="1000px"
  336. class="table"
  337. :before-close="handleClose">
  338. <div class="cyConTit">
  339. <div>社区列表</div>
  340. <el-button type="primary" size="mini" @click="editCy(0)">添加社区</el-button>
  341. </div>
  342. <el-table
  343. :data="cytableData"
  344. style="width: 100%" v-loading="cyloading">
  345. <el-table-column
  346. prop="name"
  347. label="名称"
  348. >
  349. </el-table-column>
  350. <el-table-column
  351. prop="username"
  352. label="创建人"
  353. >
  354. </el-table-column>
  355. <el-table-column
  356. prop="createtime"
  357. label="创建时间"
  358. >
  359. </el-table-column>
  360. <el-table-column
  361. show-overflow-tooltip
  362. prop="evatime2"
  363. label="截止日期"
  364. >
  365. </el-table-column>
  366. <el-table-column label="操作" width="200px">
  367. <template slot-scope="scope">
  368. <div class="operate">
  369. <button @click="lookCy(scope.row)">添加人员</button>
  370. <button @click="editCy(1,scope.row)">修改</button>
  371. <button @click="editOpen(scope.row)">{{ scope.row.isopen ? '启用' : '禁用' }}</button>
  372. <button @click="delete_Cy(scope.row)" style="color:red;">删除</button>
  373. </div>
  374. </template>
  375. </el-table-column>
  376. </el-table>
  377. </el-dialog>
  378. <el-dialog
  379. title="社区人员"
  380. :visible.sync="dialogcyperson"
  381. width="1000px"
  382. class="table"
  383. :before-close="handleClose2">
  384. <div class="cyConTit">
  385. <div>人员列表</div>
  386. <el-button type="primary" size="mini" @click="getTeacher">添加人员</el-button>
  387. </div>
  388. <el-table
  389. :data="cypersontableData"
  390. style="width: 100%" v-loading="cypersonloading">
  391. <el-table-column
  392. prop="name"
  393. label="名称"
  394. >
  395. </el-table-column>
  396. <el-table-column
  397. prop="accountNumber"
  398. label="账号"
  399. >
  400. </el-table-column>
  401. <el-table-column
  402. prop="organizationname"
  403. label="学校"
  404. >
  405. </el-table-column>
  406. <el-table-column label="操作" width="200px">
  407. <template slot-scope="scope">
  408. <div class="operate">
  409. <button @click="removeCyperson(scope.row)" style="color:red;">移出</button>
  410. </div>
  411. </template>
  412. </el-table-column>
  413. </el-table>
  414. </el-dialog>
  415. <el-dialog
  416. :title="isedit ?'修改社区':'添加社区'"
  417. :visible.sync="dialogcyADD"
  418. width="1000px"
  419. class="table"
  420. :before-close="handleClose2">
  421. <form class="el-form">
  422. <!-- 名称 -->
  423. <div class="el-form-item" style="margin-top: 15px">
  424. <label class="el-form-item__label" style="width: 100px">名称</label>
  425. <div class="el-form-item__content" style="margin-left: 5px">
  426. <span>
  427. <div class="add_input el-input el-input--suffix">
  428. <input v-model="editCyInfo.name" type="text" autocomplete="off" placeholder="社区名称"
  429. class="el-input__inner" />
  430. </div>
  431. </span>
  432. </div>
  433. </div>
  434. <!-- banner -->
  435. <div class="el-form-item">
  436. <label class="el-form-item__label" style="width: 100px">截止日期</label>
  437. <el-date-picker
  438. v-model="editCyInfo.evatime"
  439. type="datetimerange"
  440. align="right"
  441. start-placeholder="开始日期"
  442. end-placeholder="结束日期"
  443. :default-time="['12:00:00', '08:00:00']">
  444. </el-date-picker>
  445. </div>
  446. <div class="el-form-item" style="align-items:flex-start;">
  447. <label class="el-form-item__label" style="width: 100px;flex-shrink: 0;">自定义分类</label>
  448. <div style="">
  449. <el-button size="mini" type="primary" @click="addType()">添加分类</el-button>
  450. <div v-if="editCyInfo.typeL && editCyInfo.typeL.length" style="margin-top: 10px;">
  451. <div class="typeArea" v-for="(item,index) in editCyInfo.typeL" :key="item.id">
  452. <div style="font-size: 12px;">分类名称</div>
  453. <div style="display: flex;gap: 20px;margin-top: 2px;">
  454. <div class="bigtype">
  455. <el-input
  456. v-if="item.eit == 0"
  457. v-model="editCyInfo.typeL[index].name" placeholder="请输入内容">
  458. </el-input>
  459. <span style="font-size: 16px;font-weight: 600;" v-else>{{ item.name }}</span>
  460. </div>
  461. <span class="btn" @click="Deltype(index)">删除</span>
  462. <span class="btn" v-if="item.eit == 0" @click="editCyInfo.typeL[index].eit = 1">确定</span>
  463. <span class="btn" v-else @click="editCyInfo.typeL[index].eit = 0">编辑</span>
  464. </div>
  465. <div style="font-size: 12px;margin-top: 10px;">分类标签</div>
  466. <div class="tagL">
  467. <template v-if="item.children && item.children.length">
  468. <span style="display: flex;gap: 10px;align-items: center;" v-for="(i,ind) in item.children" :key="i.id">
  469. <el-input
  470. v-if="i.eit == 0"
  471. v-model="editCyInfo.typeL[index].children[ind].name" placeholder="请输入内容">
  472. </el-input>
  473. <span v-else>{{ i.name }}</span>
  474. <span class="btn" @click="Deltag(index,ind)">删除</span>
  475. <span class="btn" v-if="i.eit == 0" @click="editCyInfo.typeL[index].children[ind].eit = 1">确定</span>
  476. <span class="btn" v-else @click="editCyInfo.typeL[index].children[ind].eit = 0">编辑</span>
  477. </span>
  478. </template>
  479. <span style="cursor: pointer;background-color: #409EFF;color: #fff;" @click="Addtag(index)">添加</span>
  480. </div>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. <div class="el-form-item">
  486. <label class="el-form-item__label" style="width: 100px">banner</label>
  487. <div class="el-form-item__content" style="margin-left: 5px">
  488. <el-button type="primary" @click="cyImgAdd">添加</el-button>
  489. </div>
  490. </div>
  491. <div class="el-form-item" v-if="editCyInfo.banner">
  492. <div style="position: relative;">
  493. <div class="cha" @click="delImg">❌</div>
  494. <img style="width: 60px;height: 60px;object-fit: cover;" :src="editCyInfo.banner" alt="">
  495. </div>
  496. </div>
  497. </form>
  498. <span slot="footer" class="dialog-footer">
  499. <el-button @click="handleClose2">取 消</el-button>
  500. <el-button v-if="isedit == 0" type="primary" @click="AddCy">确定添加</el-button>
  501. <el-button v-else type="primary" @click="updateCy">确定修改</el-button>
  502. </span>
  503. </el-dialog>
  504. <!-- 添加社区成员 -->
  505. <el-dialog
  506. title="添加社区成员"
  507. :visible.sync="dialogaddCyperson"
  508. :append-to-body="true"
  509. width="25%"
  510. height="80%"
  511. :close-on-click-modal="false"
  512. :before-close="handleClose"
  513. class="addNewPP customWidth"
  514. >
  515. <div class="people">
  516. <div class="people_top">
  517. <div class="people_top_right">
  518. <div class="people_search">
  519. <el-input
  520. placeholder="搜索成员名称"
  521. v-model="searchTN"
  522. @keyup.enter.native="getTeacher"
  523. ></el-input>
  524. <div class="search_img" @click="getTeacher">
  525. <img src="../assets/search.png" alt />
  526. </div>
  527. </div>
  528. </div>
  529. <div class="people_nav" style="display: flex; align-items: center">
  530. <div class="check_class_left_title">选择成员</div>
  531. <div style="display: flex; align-items: center; margin-left: auto">
  532. <el-checkbox
  533. v-model="checkAll"
  534. @change="handleCheckAllChange2"
  535. class="all_check"
  536. >全选</el-checkbox
  537. >
  538. </div>
  539. </div>
  540. </div>
  541. <div class="t_j_box" style="padding: 15px 10px 0;box-sizing: border-box;">
  542. <div>姓名</div>
  543. <div>账号</div>
  544. <div>学校</div>
  545. </div>
  546. <el-checkbox-group
  547. v-model="checkboxList3"
  548. class="people_name"
  549. @change="handleCheckedCitiesChange"
  550. v-if="teacherJuri.length"
  551. >
  552. <el-checkbox
  553. v-for="item in teacherJuri"
  554. :key="item.userid"
  555. :label="item.userid"
  556. >
  557. <div class="t_j_box">
  558. <el-tooltip
  559. placement="top"
  560. :content="item.name ? item.name : '暂无姓名'"
  561. >
  562. <div>{{ item.name ? item.name : "暂无姓名" }}</div>
  563. </el-tooltip>
  564. <el-tooltip placement="top" :content="item.accountNumber.split('@')[0]">
  565. <div>{{ item.accountNumber.split('@')[0] }}</div>
  566. </el-tooltip>
  567. <el-tooltip placement="top" :content="item.organizationname">
  568. <div>{{ item.organizationname }}</div>
  569. </el-tooltip>
  570. </div>
  571. </el-checkbox>
  572. </el-checkbox-group>
  573. <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
  574. </div>
  575. <span slot="footer" class="dialog-footer">
  576. <el-button @click="dialogaddCyperson = false">取 消</el-button>
  577. <el-button type="primary" @click="addcyperson">确定</el-button>
  578. </span>
  579. </el-dialog>
  580. <!-- 管理年级 -->
  581. <el-dialog
  582. title="管理年级"
  583. :visible.sync="gradia"
  584. :append-to-body="true"
  585. width="600"
  586. :close-on-click-modal="false"
  587. :before-close="handleClose"
  588. class="table"
  589. >
  590. <div>
  591. <el-button size="mini" type="primary" @click="graopt(0)">添加年级</el-button>
  592. </div>
  593. <el-table
  594. :data="gratab"
  595. v-loading="graloading"
  596. >
  597. <el-table-column
  598. prop="name"
  599. label="年级"
  600. >
  601. </el-table-column>
  602. <el-table-column label="操作" align="center" width="250">
  603. <template slot-scope="scope">
  604. <el-button size="mini" type="primary" @click="graopt(1,scope.row)">编辑</el-button>
  605. <el-button size="mini" type="primary" @click="delGra(scope.row.id)">删除</el-button>
  606. </template>
  607. </el-table-column>
  608. </el-table>
  609. </el-dialog>
  610. <el-dialog
  611. :title="`${isaddGra ? '修改' : '添加'}年级`"
  612. :visible.sync="addgradia"
  613. :append-to-body="true"
  614. width="600"
  615. :close-on-click-modal="false"
  616. :before-close="handleClose"
  617. class="table"
  618. >
  619. <div>{{`${isaddGra ? '修改' : '添加'}年级`}}</div>
  620. <el-input v-model="graName" placeholder="请输入内容"></el-input>
  621. <span slot="footer" class="dialog-footer">
  622. <el-button @click="addgradia = false">取 消</el-button>
  623. <el-button v-if="isaddGra == 0" type="primary" @click="insertGradeL(graName,graoid)">确定添加</el-button>
  624. <el-button v-else type="primary" @click="updateGrade()">确定修改</el-button>
  625. </span>
  626. </el-dialog>
  627. <permissionSettingDialog ref="permissionSettingDialogRef" @getData="getSchool" />
  628. </div>
  629. </template>
  630. <script>
  631. import { addOp,addCommunity,
  632. getcylist,updateCommunity,
  633. getAddcyPersonlist,updateCommunityperson,
  634. getcypersonlist,delCommunity,updateCyOP } from "@/api/user";
  635. import { insert_school3New,insertGrade,selectGrade,updateGrade } from "@/api/user.js";
  636. import { API_CONFIG } from "@/common/apiConfig";
  637. import { mapGetters } from "vuex";
  638. import permissionSettingDialog from "./dialog/permissionSettingDialog";
  639. export default {
  640. name: "schoolList",
  641. components: {
  642. permissionSettingDialog,
  643. },
  644. data() {
  645. return {
  646. gracheckAll: false,
  647. checkedGra: [],
  648. gralist: ['一年级','二年级','三年级','四年级','五年级','六年级','七年级','八年级','九年级','高一','高二','高三'],
  649. graisInde: false, //年级全选按钮
  650. gradia:false,
  651. addgradia:false,
  652. graloading:false,
  653. gratotal:0,
  654. grapage:1,
  655. gratab:[],
  656. graName:'',
  657. graoid:'',
  658. graclaid:'',
  659. isaddGra:0, //0是添加 1是修改
  660. // 点击组织操作添加社区弹框
  661. dialogcommunity:false,
  662. // 打开添加信息组织弹框,存储的组织信息
  663. cyInfo:[], //组织信息
  664. // 社区列表的loading
  665. cyloading:false,
  666. // 社区添加与修改所存储的信息
  667. editCyInfo:{name:'',banner:'',evatime:'',typeL:[]},
  668. // 添加与修改社区共用一个弹框 0是添加信息 1 修改信息
  669. isedit:0,
  670. // 添加与修改社区弹框
  671. dialogcyADD:false,
  672. //组织社区列表
  673. cytableData:[],
  674. // 添加社区人员的组织人员列表
  675. teacherJuri:[],
  676. //已添加社区人员列表
  677. cypersontableData:[],
  678. // 添加社区人员列表弹框已选中人员
  679. checkboxList3:[], //选中的人员
  680. // 添加社区人员列表全选
  681. checkAll:false,
  682. // 社区人员列表弹框
  683. dialogcyperson:false,
  684. // 社区人员列表弹框loading
  685. cypersonloading:false,
  686. // 添加社区成员弹框
  687. dialogaddCyperson:false,
  688. // 添加社区成员弹框人员搜索框
  689. searchTN:'',
  690. schoolData: [],
  691. schoolList: [],
  692. cn_school: [],
  693. checkOid: "",
  694. checkOrg: "",
  695. checkArea: "",
  696. currentPage: 1,
  697. pageSize: 10,
  698. total: 0,
  699. add_school_dialog: false,
  700. add_school_dialog2: false,
  701. enable_school_dialog: false,
  702. dialogAction: '',
  703. useDate: "",
  704. sch_name: "", //学校名称
  705. form: {
  706. name: "",
  707. account: "",
  708. organization: "",
  709. school: "",
  710. },
  711. school: {
  712. OrgId: null, // 初始化 OrgId 为 null 或适当的默认值
  713. parentOrgId: "",
  714. },
  715. region: "", //地区
  716. schoolCode: "", //学校编码
  717. schoolCode2: "", //学校编码
  718. regionC: "cn", //区域
  719. regionCList: [
  720. { id: 1, name: "hk" },
  721. { id: 2, name: "cn" },
  722. { id: 3, name: "com" },
  723. ], //区域列表
  724. organizations: [],
  725. schoolDetail: "", //学校描述
  726. schoolType: "1", //学校单选框类型
  727. loginPermission: "1", //是否允许登录
  728. nid: "", //修改学校的id
  729. unShowJurUser: ['0abcb118-9110-11eb-80ad-005056b86db5']
  730. };
  731. },
  732. methods: {
  733. graopt(val,data){
  734. this.isaddGra = val;
  735. if (data && data.id) {
  736. this.graclaid = data.id;
  737. this.graName = data.name;
  738. }else{
  739. this.graName = '';
  740. }
  741. this.addgradia = true;
  742. },
  743. //修改年级
  744. updateGrade() {
  745. let params = {
  746. id: this.graclaid,
  747. n: this.graName,
  748. oid: this.graoid,
  749. };
  750. // this.ajax
  751. // .get(this.$store.state.api + "updateGrade", params)
  752. // .then((res) => {
  753. updateGrade(params)
  754. .then((res) => {
  755. if (res.data[0] && res.data[0][0].classname == 1) {
  756. this.$message({
  757. message: "不能与其他年级名称相同!",
  758. type: "error",
  759. });
  760. } else {
  761. this.$message({
  762. message: "年级修改成功!",
  763. type: "success",
  764. });
  765. this.addgradia = false;
  766. this.opengradia(this.graoid);
  767. this.graName = '';
  768. this.graclaid = '';
  769. }
  770. })
  771. .catch((err) => {
  772. this.$message({
  773. message: this.lang.Modificationfailed,
  774. type: "error",
  775. });
  776. console.error(err);
  777. });
  778. },
  779. //获取年级列表
  780. opengradia(oid) {
  781. this.gradia = true;
  782. this.graoid = oid;
  783. this.graloading = true;
  784. let params = {
  785. cu: "",
  786. oid: oid,
  787. cn: '',
  788. page: this.grapage,
  789. };
  790. console.log('params',params);
  791. selectGrade(params)
  792. .then(async (res) => {
  793. this.gratotal = res.data[0].length > 0 ? res.data[0][0].num : 0;
  794. this.gratab = res.data[0];
  795. this.graloading = false;
  796. })
  797. .catch((error) => {
  798. this.graloading = false;
  799. console.error("请求失败,错误信息:", error);
  800. });
  801. },
  802. // 添加年级
  803. handleCheckAllChange(val) {
  804. this.checkedGra = val ? this.gralist : [];
  805. this.graisInde = false;
  806. },
  807. hangraChange(value) {
  808. let checkedCount = value.length;
  809. this.gracheckAll = checkedCount === this.gralist.length;
  810. this.graisInde = checkedCount > 0 && checkedCount < this.gralist.length;
  811. },
  812. addType(){
  813. this.editCyInfo.typeL.push({
  814. id: Date.now(),
  815. name: '',
  816. eit: 0,
  817. children: []
  818. })
  819. },
  820. async batchInstgra(oid){
  821. let kk = []
  822. for (let index = 0; index < this.checkedGra.length; index++) {
  823. setTimeout(async () => {
  824. kk.push(await this.insertGradeL(this.checkedGra[index],oid))
  825. }, 500);
  826. }
  827. Promise.all(kk)
  828. .then(() => {
  829. this.checkedGra = [];
  830. if (kk.indexOf(0) != -1) {
  831. this.$message.error('年级未全部添加成功')
  832. }else{
  833. this.$message.success('年级添加成功')
  834. }
  835. })
  836. .catch((e) => {
  837. console.log("👉", e);
  838. });
  839. },
  840. //新增年级
  841. insertGradeL(val,oid) {
  842. return new Promise((resolve, reject) => {
  843. let params = {
  844. name: val,
  845. oid: oid,
  846. uid: this.userid,
  847. };
  848. // console.log('params',params);
  849. insertGrade(params)
  850. .then((res) => {
  851. if (res.data[0] && res.data[0][0].classname == 1) {
  852. this.$message({
  853. message: "不能与其他年级名称相同!",
  854. type: "error",
  855. });
  856. reject(0)
  857. } else {
  858. if (this.graoid) {
  859. this.$message({
  860. message: "年级添加成功!",
  861. type: "success",
  862. });
  863. this.addgradia = false;
  864. this.opengradia(this.graoid);
  865. }
  866. resolve(1)
  867. }
  868. })
  869. .catch((err) => {
  870. reject(0)
  871. console.error(err);
  872. });
  873. })
  874. },
  875. Deltype(ind){
  876. this.editCyInfo.typeL.splice(ind,1)
  877. },
  878. Deltag(index,ind){
  879. this.editCyInfo.typeL[index].children.splice(ind,1)
  880. },
  881. Addtag(index){
  882. this.editCyInfo.typeL[index].children.push({
  883. id: Date.now(),
  884. name: '',
  885. eit:0,
  886. })
  887. },
  888. // 表头的背景色
  889. headerCellStyle() {
  890. return { backgroundColor: "#f1f1f1" };
  891. },
  892. changeOrg() {
  893. this.currentPage = 1;
  894. this.getSchool();
  895. },
  896. changeOid() {
  897. this.currentPage = 1; // 重置当前页
  898. this.getSchool(); // 调用获取数据的方法
  899. },
  900. changeArea() {
  901. this.currentPage = 1;
  902. this.getSchool();
  903. },
  904. getSchool() {
  905. let params = [
  906. {
  907. functionName: "getSchoolList",
  908. sName: this.checkOid,
  909. oName: this.checkOrg,
  910. area: this.checkArea,
  911. page: this.currentPage,
  912. num: this.pageSize,
  913. },
  914. ];
  915. this.$ajax
  916. .post(API_CONFIG.baseUrl, params)
  917. .then((res) => {
  918. // console.log("返回的数据为:", res.data); // 检查返回的数据
  919. if (res.data && Array.isArray(res.data[0])) {
  920. // 使用 map() 提取所有组织名称
  921. this.schoolData = res.data[0];
  922. if (
  923. this.schoolData.length > 0 &&
  924. res.data[0][0] &&
  925. res.data[0][0].num !== undefined
  926. ) {
  927. this.total = res.data[0][0].num; // 使用 num 的值
  928. } else {
  929. this.total = 0; // 设置总数为0
  930. }
  931. } else {
  932. this.total = 0; // 如果没有数据,设置总数为0
  933. }
  934. })
  935. .catch((err) => {
  936. this.$message.error("查询失败");
  937. console.error("请求失败,错误信息:", err);
  938. });
  939. },
  940. ajax_school() {
  941. // 构建请求参数
  942. let params = [
  943. {
  944. functionName: "getAllSchool", // 调用存储过程的名称
  945. },
  946. ];
  947. this.$ajax
  948. .post(API_CONFIG.baseUrl, params)
  949. .then((res) => {
  950. // console.log("返回的数据为:", res.data); // 检查返回的数据
  951. if (res.data && Array.isArray(res.data[0])) {
  952. this.cn_school = res.data[0].map((item) => ({
  953. name: item.name,
  954. id: item.id,
  955. org: item.org,
  956. area: item.area,
  957. }));
  958. // 将 name 和 org 都存入 cn_school 数组中
  959. this.schoolList = res.data[0].map((item) => ({
  960. name: item.name,
  961. id: item.id,
  962. org: item.org,
  963. area: item.area,
  964. }));
  965. // console.log(this.schoolList);
  966. }
  967. })
  968. .catch((err) => {
  969. this.$message.error("查询失败");
  970. console.error("请求失败,错误信息:", err);
  971. });
  972. },
  973. // 页码扩展按钮
  974. handlePageChange(page) {
  975. this.currentPage = page;
  976. this.getSchool();
  977. },
  978. close_add_school() {
  979. this.add_school_dialog = false;
  980. },
  981. close_add_school2() {
  982. this.add_school_dialog2 = false;
  983. this.sch_name = ""; // 清空学校名称
  984. this.school.parentOrgId = ""; // 清空组织选择
  985. this.region = ""; // 清空地区选择
  986. this.regionC = "cn";
  987. this.schoolType = "1"; // 清空学校类型选择
  988. this.schoolCode = ""; // 清空学校编码
  989. this.schoolCode2 = ""; // 清空学校编码
  990. this.schoolDetail = ""; // 清空学校描述
  991. this.loginPermission = "1"; // 清空登录权限的选择
  992. },
  993. close_enable_school() {
  994. this.enable_school_dialog = false;
  995. this.useDate = "";
  996. },
  997. //组织查询
  998. ajax_org() {
  999. const params = [API_CONFIG.ajax_org]; // 使用配置中的接口参数
  1000. this.$ajax
  1001. .post(API_CONFIG.baseUrl, params)
  1002. .then((res) => {
  1003. // console.log("返回的数据为:", res.data); // 检查返回的数据
  1004. if (res.data && Array.isArray(res.data[0])) {
  1005. // 使用 map() 提取所有组织名称
  1006. this.organizations = res.data[0].map((item) => ({
  1007. name: item.name,
  1008. id: item.id,
  1009. }));
  1010. }
  1011. // console.log("返回的结果为:", this.organizations);
  1012. })
  1013. .catch((err) => {
  1014. this.$message.error("查询失败");
  1015. console.error("请求失败,错误信息:", err);
  1016. });
  1017. },
  1018. ajax_add_school() {
  1019. // 校验学校名称是否为空
  1020. if (!this.sch_name || this.sch_name.trim() === "") {
  1021. this.$message.error("学校名称不能为空!");
  1022. return;
  1023. }
  1024. if (this.schoolCode2 && this.schoolCode2.length && this.schoolCode2.length != 4) return this.$message.error("随机码须4位数");
  1025. // 构建请求参数
  1026. let params =
  1027. {
  1028. u_name: this.sch_name, // 学校名称,绑定到 orgName
  1029. u_org: this.school.parentOrgId || "", // 选择的组织的 ID,绑定到 school.parentOrgId,如果没有选择则为空
  1030. u_dest: this.region || "", // 地区,绑定到 region,如果为空则传空字符串
  1031. u_type: this.schoolType || "", // 学校类型,绑定到 schoolType,如果没有选择则为空
  1032. u_code: this.schoolCode || "", // 学校编码,绑定到 schoolCode,如果为空则传空字符串
  1033. u_code2: this.schoolCode2 || "", // 学校随机码,绑定到 schoolCode,如果为空则传空字符串
  1034. u_detail: this.schoolDetail || "", // 学校描述,绑定到 schoolDetail,如果为空则传空字符串
  1035. u_regionC: this.regionC || "",
  1036. u_isLogin: this.loginPermission === "1" ? 1 : 2, // 是否允许登录,默认传 2(不允许登录)如果没有选择
  1037. uid: this.userid,
  1038. };
  1039. // 发起请求
  1040. insert_school3New(params)
  1041. .then(async (res) => {
  1042. // console.log("👉", res.data);
  1043. if (res.data && res.data[0] && res.data[0][0]) {
  1044. if (res.data[0][0].insertId === 1) {
  1045. this.$message({
  1046. type: "error",
  1047. message: "该学校已存在,请重新选择!",
  1048. });
  1049. return;
  1050. } else {
  1051. this.$message({
  1052. type: "success",
  1053. message: "学校添加成功!",
  1054. });
  1055. // if (this.checkedGra.length) {
  1056. // this.batchInstgra(res.data[0][0].insertId)
  1057. // }
  1058. await addOp({
  1059. uid: this.userid,
  1060. cid: "",
  1061. type: "user_op",
  1062. content: `添加了学校 ${this.sch_name}`,
  1063. });
  1064. }
  1065. } else {
  1066. this.$message.error("插入失败,未返回有效结果");
  1067. }
  1068. // 刷新学校列表
  1069. this.getSchool();
  1070. // 关闭弹窗
  1071. this.add_school_dialog = false;
  1072. // 清空输入框、下拉菜单选择和单选框
  1073. this.sch_name = ""; // 清空学校名称
  1074. this.school.parentOrgId = ""; // 清空组织选择
  1075. this.region = ""; // 清空地区选择
  1076. this.schoolDetail = ""; // 清空学校描述
  1077. this.regionC = "cn";
  1078. this.schoolType = "1"; // 清空学校类型选择
  1079. this.schoolCode = ""; // 清空学校编码
  1080. this.schoolCode2 = ""; // 清空学校随机码
  1081. this.loginPermission = "1"; // 清空登录权限的选择
  1082. })
  1083. .catch((err) => {
  1084. this.$message.error("插入失败");
  1085. console.error("请求失败,错误信息:", err);
  1086. });
  1087. },
  1088. update(row) {
  1089. this.nid = row.id;
  1090. this.add_school_dialog2 = true;
  1091. this.sch_name = row.name;
  1092. this.school.parentOrgId = row.org;
  1093. this.region = row.dest;
  1094. this.schoolCode = row.code;
  1095. this.schoolCode2 = row.code2;
  1096. this.schoolDetail = row.detail;
  1097. this.regionC = row.area;
  1098. },
  1099. updateSchool() {
  1100. if (this.schoolCode2 && this.schoolCode2.length && this.schoolCode2.length != 4) return this.$message.error("随机码须4位数");
  1101. let params = [
  1102. {
  1103. functionName: "updateSchool2N",
  1104. id: this.nid,
  1105. name: this.sch_name,
  1106. dest: this.region || '',
  1107. code: this.schoolCode || '',
  1108. code2: this.schoolCode2 || '',
  1109. organ: this.school.parentOrgId || '',
  1110. detail: this.schoolDetail || '',
  1111. area: this.regionC,
  1112. },
  1113. ];
  1114. this.$ajax
  1115. .post(API_CONFIG.baseUrl, params)
  1116. .then(async (res) => {
  1117. console.log("👉", res.data);
  1118. this.add_school_dialog2 = false;
  1119. this.$message({
  1120. message: "修改成功",
  1121. type: "success",
  1122. });
  1123. this.getSchool();
  1124. // 清空输入框、下拉菜单选择和单选框
  1125. this.sch_name = ""; // 清空学校名称
  1126. this.school.parentOrgId = ""; // 清空组织选择
  1127. this.region = ""; // 清空地区选择
  1128. this.schoolDetail = ""; // 清空学校描述
  1129. this.regionC = "cn";
  1130. this.schoolType = "1"; // 清空学校类型选择
  1131. this.schoolCode = ""; // 清空学校编码
  1132. this.schoolCode2 = ""; // 清空学校随机码
  1133. this.loginPermission = "1"; // 清空登录权限的选择
  1134. await addOp({
  1135. uid: this.userid,
  1136. cid: "",
  1137. type: "user_op",
  1138. content: `修改了学校 ${this.sch_name}${this.nid}`,
  1139. });
  1140. })
  1141. .catch((err) => {
  1142. this.$message.error("修改失败");
  1143. console.log(err);
  1144. });
  1145. },
  1146. formatDate() {
  1147. // 使用示例
  1148. const today = new Date(); // 获取当前日期
  1149. const year = today.getFullYear(); // 获取年份
  1150. const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份,注意月份从0开始,所以要加1,并确保是两位数
  1151. const day = String(today.getDate()).padStart(2, '0'); // 获取日期,并确保是两位数
  1152. this.useDate = `${year}-${month}-${day}`; // 返回格式化后的日期字符串
  1153. },
  1154. enable(row,action) {
  1155. if (row.isLogin === '2') {
  1156. this.enable_school_dialog = true;
  1157. this.nid = row.id;
  1158. this.dialogAction = action;
  1159. this.formatDate();
  1160. }
  1161. else {
  1162. this.disableSchool(row);
  1163. }
  1164. },
  1165. open_enable_school(row) {
  1166. this.enable_school_dialog = true;
  1167. this.nid = row.id;
  1168. this.dialogAction = 'useDate';
  1169. if (row.isLogin === '1' || row.isLogin === 'null' || row.isLogin === '') {
  1170. this.formatDate();
  1171. } else {
  1172. this.useDate = row.isLogin;
  1173. }
  1174. },
  1175. enable_school() {
  1176. let params = [
  1177. {
  1178. functionName: "enableSchool",
  1179. id: this.nid,
  1180. date: this.useDate
  1181. }
  1182. ];
  1183. this.$ajax
  1184. .post(API_CONFIG.baseUrl, params)
  1185. .then(async (res) => {
  1186. console.log("👉", res.data);
  1187. this.enable_school_dialog = false;
  1188. this.useDate = "";
  1189. if (this.dialogAction === 'enable') {
  1190. this.$message({
  1191. message: '启用成功',
  1192. type: 'success'
  1193. });
  1194. } else if (this.dialogAction === 'useDate') {
  1195. this.$message({
  1196. message: '设置成功',
  1197. type: 'success'
  1198. });
  1199. }
  1200. // this.formatDate();
  1201. this.getSchool();
  1202. await addOp({
  1203. uid: this.userid,
  1204. cid: "",
  1205. type: "user_op",
  1206. content: `启用了学校 ${this.sch_name} ${this.nid}`,
  1207. });
  1208. })
  1209. .catch((err) => {
  1210. this.$message.error("启用失败");
  1211. console.log(err);
  1212. });
  1213. },
  1214. disableSchool(row) {
  1215. let params = [
  1216. {
  1217. functionName: "disableSchool",
  1218. id: row.id,
  1219. },
  1220. ];
  1221. this.$confirm("确定禁用此学校记录吗?", "提示", {
  1222. confirmButtonText: "确定",
  1223. cancelButtonText: "取消",
  1224. type: "warning",
  1225. })
  1226. .then(() => {
  1227. this.$ajax
  1228. .post(API_CONFIG.baseUrl, params)
  1229. .then(async (res) => {
  1230. console.log("👉", res.data);
  1231. this.$message({
  1232. message: '禁用成功',
  1233. type: 'success'
  1234. });
  1235. this.getSchool();
  1236. await addOp({
  1237. uid: this.userid,
  1238. cid: "",
  1239. type: "user_op",
  1240. content: `禁用了学校 ${row.name} ${row.id}`,
  1241. });
  1242. })
  1243. })
  1244. .catch((err) => {
  1245. console.log(err);
  1246. });
  1247. },
  1248. delete_school(row) {
  1249. this.nid = row.id;
  1250. let params = [
  1251. {
  1252. functionName: "deleteSchool",
  1253. id: this.nid,
  1254. },
  1255. ];
  1256. this.$confirm("确定删除此学校记录吗?", "提示", {
  1257. confirmButtonText: "确定",
  1258. cancelButtonText: "取消",
  1259. type: "warning",
  1260. })
  1261. .then(() => {
  1262. this.$ajax.post(API_CONFIG.baseUrl, params).then(async (res) => {
  1263. console.log("👉", res.data);
  1264. this.$message({
  1265. message: "删除成功",
  1266. type: "success",
  1267. });
  1268. this.getSchool();
  1269. await addOp({
  1270. uid: this.userid,
  1271. cid: "",
  1272. type: "user_op",
  1273. content: `删除了学校 ${row.name}${row.id}`,
  1274. });
  1275. });
  1276. })
  1277. .catch((err) => {
  1278. this.$message.error("删除失败");
  1279. console.log(err);
  1280. });
  1281. },
  1282. async getUserId(oid, org) {
  1283. let params = [
  1284. {
  1285. functionName: "select_Suffix", // 调用存储过程的名称
  1286. org: org, //组织id
  1287. oid: oid, //学校id
  1288. },
  1289. ];
  1290. try {
  1291. const res = await this.$ajax.post(API_CONFIG.baseUrl, params);
  1292. console.log("getSuffix", res);
  1293. let data = res.data[0];
  1294. let orgData = res.data[1];
  1295. let ap =
  1296. data.length > 0
  1297. ? data[0].userid
  1298. : orgData.length > 0
  1299. ? orgData[0].userid
  1300. : "";
  1301. return ap;
  1302. } catch (err) {
  1303. console.error("请求失败,错误信息:", err);
  1304. }
  1305. },
  1306. async toPage(row) {
  1307. const oid = row.id;
  1308. const org = row.org;
  1309. let userid = await this.getUserId(oid, org);
  1310. await addOp({
  1311. uid: this.userid,
  1312. cid: "",
  1313. type: "user_op",
  1314. content: `点击了批量添加 ${row.name}${row.id}`,
  1315. });
  1316. const url = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/?#/teacher?userid=${userid ? userid : this.userid
  1317. }&oid=${oid}&org=${org}`;
  1318. window.open(url, "_blank");
  1319. },
  1320. permissionSetting(data) {
  1321. this.$refs.permissionSettingDialogRef.open(data, "school");
  1322. },
  1323. // 打开添加社区弹框,
  1324. addcommunityL(val){
  1325. console.log('val',val);
  1326. this.cyInfo = val
  1327. this.getCy()
  1328. this.dialogcommunity = true
  1329. },
  1330. // 打开添加社区获取已添加的社区列表
  1331. getCy(){
  1332. this.cyloading = true;
  1333. let params = {
  1334. oid: this.cyInfo.id,
  1335. n: '', //预留搜索框
  1336. page: 1,
  1337. num: 10000,
  1338. };
  1339. getcylist(params)
  1340. .then(async (res) => {
  1341. console.log(res);
  1342. let data = res.data[0]
  1343. data.forEach(e => {
  1344. if (e.evatime) {
  1345. e.evatime = JSON.parse(e.evatime)
  1346. e.evatime2 = e.evatime.map(dateStr => this.formatDateCy(dateStr)).join('——')
  1347. }
  1348. e.typeL = e.typeL ? JSON.parse(e.typeL) : '';
  1349. });
  1350. this.cytableData = data
  1351. console.log('this.cytableData',this.cytableData);
  1352. this.cyloading = false;
  1353. })
  1354. .catch((error) => {
  1355. this.cyloading = false;
  1356. console.error("请求失败,错误信息:", error);
  1357. });
  1358. },
  1359. formatDateCy(dateStr, format = 'YYYY-MM-DD HH:mm:ss') {
  1360. const date = new Date(dateStr);
  1361. const pad = (num) => num.toString().padStart(2, '0');
  1362. const year = date.getFullYear();
  1363. const month = pad(date.getMonth() + 1);
  1364. const day = pad(date.getDate());
  1365. const hours = pad(date.getHours());
  1366. const minutes = pad(date.getMinutes());
  1367. const seconds = pad(date.getSeconds());
  1368. return format
  1369. .replace('YYYY', year)
  1370. .replace('MM', month)
  1371. .replace('DD', day)
  1372. .replace('HH', hours)
  1373. .replace('mm', minutes)
  1374. .replace('ss', seconds);
  1375. },
  1376. // 禁用启用社区
  1377. editOpen(val){
  1378. this.cyloading = true
  1379. let open = val.isopen ? '0' : '1'
  1380. let params = {
  1381. idL: val.id,
  1382. op: open
  1383. };
  1384. console.log('params',params);
  1385. updateCyOP(params)
  1386. .then(async (response) => {
  1387. if (response) {
  1388. await addOp({
  1389. uid: this.userid,
  1390. cid: "",
  1391. type: "user_op",
  1392. content: `${open ? '禁用' : '启用'}了${val.name}社区`,
  1393. });
  1394. this.$message({
  1395. type: "success",
  1396. message: "修改成功",
  1397. });
  1398. this.cyloading = false
  1399. this.getCy()
  1400. }
  1401. })
  1402. .catch((error) => {
  1403. this.cyloading = false
  1404. console.error("请求失败,错误信息:", error);
  1405. });
  1406. },
  1407. // 点击添加社区 0 是添加社区 1是修改社区信息
  1408. editCy(val,row){
  1409. console.log('row',row);
  1410. this.isedit = val
  1411. if (val == 1) {
  1412. let kol = JSON.parse(JSON.stringify(row))
  1413. if (kol && !kol.typeL) {
  1414. kol.typeL = []
  1415. }
  1416. this.editCyInfo = kol
  1417. }
  1418. this.dialogcyADD = true
  1419. },
  1420. // 添加组织社区
  1421. AddCy(){
  1422. if (!this.editCyInfo.name) return this.$message.error('请添加名称')
  1423. let params = {
  1424. uid:this.userid,
  1425. nam: this.editCyInfo.name,
  1426. oid:this.cyInfo.id,
  1427. ban: this.editCyInfo.banner,
  1428. eva: this.editCyInfo.evatime ? JSON.stringify(this.editCyInfo.evatime) : '',
  1429. typ: (this.editCyInfo.typeL && this.editCyInfo.typeL.length) ? JSON.stringify(this.editCyInfo.typeL) : '',
  1430. };
  1431. addCommunity(params)
  1432. .then(async (response) => {
  1433. if (response) {
  1434. console.log('response',response);
  1435. await addOp({
  1436. uid: this.userid,
  1437. cid: "",
  1438. type: "user_op",
  1439. content: `添加了${this.editCyInfo.name}社区`,
  1440. });
  1441. this.$message({
  1442. type: "success",
  1443. message: "添加成功",
  1444. });
  1445. this.dialogcyADD = false;
  1446. this.getCy()
  1447. this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
  1448. }
  1449. })
  1450. .catch((error) => {
  1451. console.error("请求失败,错误信息:", error);
  1452. });
  1453. },
  1454. // 修改社区信息
  1455. updateCy(){
  1456. if (!this.editCyInfo.name) return this.$message.error('请添加名称')
  1457. let params = {
  1458. idL:this.editCyInfo.id,
  1459. nam: this.editCyInfo.name,
  1460. ban: this.editCyInfo.banner,
  1461. eva: this.editCyInfo.evatime ? JSON.stringify(this.editCyInfo.evatime) : '',
  1462. typ: (this.editCyInfo.typeL && this.editCyInfo.typeL.length) ? JSON.stringify(this.editCyInfo.typeL) : '',
  1463. };
  1464. console.log('params',params);
  1465. updateCommunity(params)
  1466. .then(async (response) => {
  1467. if (response) {
  1468. console.log('response',response);
  1469. await addOp({
  1470. uid: this.userid,
  1471. cid: "",
  1472. type: "user_op",
  1473. content: `修改了${this.editCyInfo.name}社区`,
  1474. });
  1475. this.$message({
  1476. type: "success",
  1477. message: "修改成功",
  1478. });
  1479. this.dialogcyADD = false;
  1480. this.getCy()
  1481. this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
  1482. }
  1483. })
  1484. .catch((error) => {
  1485. console.error("请求失败,错误信息:", error);
  1486. });
  1487. },
  1488. // 删除社区
  1489. delete_Cy(val){
  1490. this.$confirm("确定删除吗?", {
  1491. confirmButtonText: "确定",
  1492. cancelButtonText: "取消",
  1493. type: "warning",
  1494. })
  1495. .then(() => {
  1496. let params = {
  1497. idL:val.id
  1498. };
  1499. console.log('params',params);
  1500. delCommunity(params)
  1501. .then(async (response) => {
  1502. if (response) {
  1503. console.log('response',response);
  1504. await addOp({
  1505. uid: this.userid,
  1506. cid: "",
  1507. type: "user_op",
  1508. content: `删除了${val.name}社区`,
  1509. });
  1510. this.$message({
  1511. type: "success",
  1512. message: "删除成功",
  1513. });
  1514. this.getCy()
  1515. }
  1516. })
  1517. })
  1518. .catch(() => {});
  1519. },
  1520. async cyImgAdd(){
  1521. let _url = await this.uploadFile("image/*");
  1522. this.editCyInfo.banner = _url
  1523. },
  1524. // 清除照片
  1525. delImg(){
  1526. this.editCyInfo.banner = ''
  1527. },
  1528. // 全选
  1529. handleCheckAllChange2(val){
  1530. this.checkboxList3 = val ? this.teacherJuri.map(e=>e.userid) : [];
  1531. this.checkAll = val
  1532. // console.log('this.checkboxList3',this.checkboxList3);
  1533. },
  1534. // 单选
  1535. handleCheckedCitiesChange(value){
  1536. let checkedCount = value.length;
  1537. this.checkAll = checkedCount === this.teacherJuri.length;
  1538. // console.log('this.checkboxList3',this.checkboxList3);
  1539. },
  1540. // 添加社区人员
  1541. addcyperson(){
  1542. console.log('ok');
  1543. let params = {
  1544. id:this.editCyInfo.id,
  1545. tea:this.checkboxList3.join(','),
  1546. };
  1547. console.log('params',params);
  1548. updateCommunityperson(params)
  1549. .then(async (response) => {
  1550. if (response) {
  1551. console.log('response',response);
  1552. await addOp({
  1553. uid: this.userid,
  1554. cid: "",
  1555. type: "user_op",
  1556. content: `修改了${this.editCyInfo.name}社区人员`,
  1557. });
  1558. this.$message({
  1559. type: "success",
  1560. message: "修改成功",
  1561. });
  1562. this.lookCy(this.editCyInfo)
  1563. this.dialogaddCyperson = false;
  1564. }
  1565. })
  1566. .catch((error) => {
  1567. console.error("请求失败,错误信息:", error);
  1568. });
  1569. },
  1570. // 移出社区人员
  1571. removeCyperson(val){
  1572. console.log(val);
  1573. this.$confirm("确定移出吗?", {
  1574. confirmButtonText: "确定",
  1575. cancelButtonText: "取消",
  1576. type: "warning",
  1577. })
  1578. .then(() => {
  1579. let person = this.cypersontableData.filter(e=> e.userid != val.userid).map(e=>e.userid)
  1580. console.log('person',person);
  1581. let params = {
  1582. id:this.editCyInfo.id,
  1583. tea: person.join(','),
  1584. };
  1585. console.log('params',params);
  1586. updateCommunityperson(params)
  1587. .then(async (response) => {
  1588. if (response) {
  1589. console.log('response',response);
  1590. await addOp({
  1591. uid: this.userid,
  1592. cid: "",
  1593. type: "user_op",
  1594. content: `移出了${this.editCyInfo.name}社区${val.userid}人员`,
  1595. });
  1596. this.$message({
  1597. type: "success",
  1598. message: "移出成功",
  1599. });
  1600. this.dialogaddCyperson = false;
  1601. this.lookCy(this.editCyInfo)
  1602. }
  1603. })
  1604. })
  1605. .catch(() => {});
  1606. },
  1607. // 查看社区人员
  1608. lookCy(val){
  1609. this.editCyInfo = val;
  1610. this.dialogcyperson = true;
  1611. this.cypersonloading = true;
  1612. let params = {
  1613. id: val.id,
  1614. };
  1615. getcypersonlist(params)
  1616. .then(async (res) => {
  1617. console.log(res);
  1618. this.cypersonloading = false;
  1619. this.cypersontableData = res.data[0]
  1620. })
  1621. .catch((error) => {
  1622. this.cypersonloading = false;
  1623. console.error("请求失败,错误信息:", error);
  1624. });
  1625. },
  1626. // 添加社区人员获取人员列表
  1627. getTeacher() {
  1628. let params = {
  1629. oid: this.cyInfo.org ? this.cyInfo.org : this.cyInfo.id,
  1630. inp: this.searchTN,
  1631. page: 1,
  1632. num: 10
  1633. };
  1634. getAddcyPersonlist(params)
  1635. .then(async (res) => {
  1636. console.log(res);
  1637. this.teacherJuri = res.data[0];
  1638. this.checkboxList3 = this.cypersontableData.map(e=> e.userid)
  1639. this.dialogaddCyperson = true
  1640. })
  1641. .catch((error) => {
  1642. console.error("请求失败,错误信息:", error);
  1643. });
  1644. },
  1645. uploadFile(accept = "*") {
  1646. return new Promise((resolve) => {
  1647. const input = document.createElement("input");
  1648. input.type = "file";
  1649. input.accept = accept;
  1650. input.onchange = (event) => {
  1651. const file = event.target.files[0];
  1652. if (file) {
  1653. let credentials = {
  1654. accessKeyId: "AKIATLPEDU37QV5CHLMH",
  1655. secretAccessKey: "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",
  1656. }; //秘钥形式的登录上传
  1657. window.AWS.config.update(credentials);
  1658. window.AWS.config.region = "cn-northwest-1"; //设置区域
  1659. let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
  1660. // let _name = file.name;
  1661. // let size = file.size;
  1662. let params = {
  1663. Key:
  1664. file.name.split(".")[0] +
  1665. new Date().getTime() +
  1666. "." +
  1667. file.name.split(".")[file.name.split(".").length - 1],
  1668. ContentType: file.type,
  1669. Body: file,
  1670. "Access-Control-Allow-Credentials": "*",
  1671. ACL: "public-read",
  1672. }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
  1673. let options = {
  1674. partSize: 2048 * 1024 * 1024,
  1675. queueSize: 2,
  1676. leavePartsOnError: true,
  1677. };
  1678. bucket
  1679. .upload(params, options)
  1680. .on("httpUploadProgress", (evt) => {
  1681. console.log(evt);
  1682. })
  1683. .send((err, data) => {
  1684. if (err) {
  1685. this.$message.error("上传失败");
  1686. return resolve("");
  1687. } else {
  1688. return resolve(data.Location);
  1689. }
  1690. });
  1691. } else {
  1692. resolve("");
  1693. }
  1694. };
  1695. input.click();
  1696. });
  1697. },
  1698. handleClose(done){
  1699. done();
  1700. },
  1701. handleClose2(){
  1702. this.editCyInfo = ''
  1703. this.editCyInfo = {name:'',banner:'',evatime:'',typeL:[]};
  1704. this.dialogcyADD=false;
  1705. this.dialogcyperson = false
  1706. }
  1707. },
  1708. mounted() {
  1709. this.getSchool();
  1710. this.ajax_org();
  1711. this.ajax_school();
  1712. },
  1713. computed: {
  1714. ...mapGetters(["userid"]),
  1715. enableDiaTitle() {
  1716. return this.dialogAction === 'enable' ? '启用学校' : '设置使用期限'
  1717. }
  1718. },
  1719. };
  1720. </script>
  1721. <style scoped>
  1722. .list_container {
  1723. width: 100%;
  1724. height: 100%;
  1725. padding: 10px;
  1726. box-sizing: border-box;
  1727. overflow: auto;
  1728. }
  1729. /* 新增学校的内容容器 */
  1730. .el_dialog_school_content {
  1731. color: #606266;
  1732. font-size: 14px;
  1733. /* height: 300px; */
  1734. }
  1735. .el-form-item {
  1736. margin-bottom: 22px;
  1737. display: flex;
  1738. align-items: center;
  1739. /* border: 1px solid black; */
  1740. }
  1741. .el-form-item__label {
  1742. font-size: 14px;
  1743. color: #606266;
  1744. line-height: 40px;
  1745. margin-left: 20px;
  1746. width: 70px;
  1747. }
  1748. .el-form-item__content {
  1749. line-height: 40px;
  1750. position: relative;
  1751. font-size: 14px;
  1752. }
  1753. .table>>>.el-dialog__header {
  1754. padding: 15px 20px;
  1755. background: #454545;
  1756. }
  1757. .table>>>.el-dialog__title {
  1758. color: #fff;
  1759. }
  1760. .tableBox {
  1761. margin: 10px 0;
  1762. }
  1763. .operate {
  1764. display: flex;
  1765. gap: 5px;
  1766. }
  1767. .operate button {
  1768. background: none;
  1769. border: none;
  1770. cursor: pointer;
  1771. color: #308fff;
  1772. }
  1773. .cyConTit{
  1774. display: flex;
  1775. justify-content: space-between;
  1776. }
  1777. .addNewPP >>> .el-dialog__body {
  1778. padding: 5px 20px;
  1779. }
  1780. .addNewPP >>> .el-dialog {
  1781. margin-top: 5vh !important;
  1782. }
  1783. .customWidth >>> .el-dialog {
  1784. min-width: 500px !important;
  1785. }
  1786. .people {
  1787. border: 1px solid rgb(229 229 229);
  1788. /* height: 495px; */
  1789. height: 350px;
  1790. border-radius: 5px;
  1791. width: 100%;
  1792. overflow: auto;
  1793. }
  1794. .people_top {
  1795. display: flex;
  1796. width: 100%;
  1797. /* justify-content: space-between; */
  1798. /* align-items: center; */
  1799. flex-direction: column;
  1800. padding: 10px 10px 0;
  1801. box-sizing: border-box;
  1802. }
  1803. .people_top_right {
  1804. height: 40px;
  1805. margin-bottom: 10px;
  1806. }
  1807. .people_search {
  1808. display: flex;
  1809. position: relative;
  1810. }
  1811. .people_search >>> .el-input__inner {
  1812. /* height: 25px; */
  1813. width: 100%;
  1814. }
  1815. .search_img {
  1816. width: 20px;
  1817. height: 20px;
  1818. position: absolute;
  1819. right: 10px;
  1820. top: 50%;
  1821. transform: translateY(-50%);
  1822. }
  1823. .search_img > img {
  1824. width: 100%;
  1825. height: 100%;
  1826. }
  1827. .people_name {
  1828. display: flex;
  1829. justify-content: flex-start;
  1830. padding: 20px 10px;
  1831. flex-direction: column;
  1832. flex-wrap: wrap;
  1833. }
  1834. .people_name >>> .el-checkbox {
  1835. width: 100%;
  1836. display: flex;
  1837. align-items: center;
  1838. margin-bottom: 10px;
  1839. }
  1840. .people_name >>> .el-checkbox__label {
  1841. text-overflow: ellipsis;
  1842. overflow: hidden;
  1843. width: calc(100%);
  1844. }
  1845. .t_j_box{
  1846. display: flex;
  1847. justify-content: space-between;
  1848. }
  1849. .t_j_box div{
  1850. width: 100px;
  1851. overflow: hidden;
  1852. text-overflow: ellipsis;
  1853. white-space: nowrap;
  1854. }
  1855. .cha{
  1856. position: absolute;top: 0;right: 5px;
  1857. cursor: pointer;
  1858. }
  1859. .custom-tree-node {
  1860. flex: 1;
  1861. display: flex;
  1862. align-items: center;
  1863. justify-content: space-between;
  1864. font-size: 14px;
  1865. padding-right: 8px;
  1866. }
  1867. .tagL{
  1868. display: flex;
  1869. align-items: center;
  1870. flex-wrap: wrap;
  1871. gap: 2px;
  1872. }
  1873. .tagL >>> .el-input__inner{
  1874. height: 30px;
  1875. line-height: 30px;
  1876. width: 120px;
  1877. }
  1878. .tagL span{
  1879. background: aqua;
  1880. padding: 5px 3px;
  1881. border-radius: 5px;
  1882. flex-shrink: 0;
  1883. }
  1884. .btn{
  1885. cursor: pointer;
  1886. display: flex;
  1887. align-items: center;
  1888. }
  1889. .bigtype{
  1890. display: flex;
  1891. align-items: center;
  1892. gap: 10px;
  1893. }
  1894. .bigtype >>> .el-input__inner{
  1895. height: 30px;
  1896. line-height: 30px;
  1897. width: 120px;
  1898. }
  1899. .typeArea{
  1900. border: 1px #ccc solid;padding: 5px;border-radius: 10px;
  1901. }
  1902. .alltype{
  1903. margin-top: 10px;
  1904. display: flex;
  1905. flex-direction: column;
  1906. gap: 15px;
  1907. }
  1908. .flexcol{
  1909. display: flex;
  1910. flex-direction: column;
  1911. gap: 10px;
  1912. }
  1913. </style>