index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <!-- <el-card class="workspace-info card-border mb-2">
  3. <div class="workspace-name">
  4. <div class="card-header">
  5. <span>{{ form.name }}</span>
  6. </div>
  7. </div>
  8. </el-card> -->
  9. <div class="flex">
  10. <el-card class="workspace-info w-full" style="padding-bottom: 40px;">
  11. <template #header>
  12. <div class="card-header">
  13. <span>工作间信息</span>
  14. </div>
  15. </template>
  16. <ul class="user-info">
  17. <div class="info-row">
  18. <li class="info-item">
  19. <Icon class="mr-5px" icon="ep:user" />
  20. <span class="info-label">工作间名称:</span>
  21. <span class="pull-right">{{ userInfo.name }}</span>
  22. </li>
  23. <li class="info-item">
  24. <Icon class="mr-5px" icon="ep:phone" />
  25. <span class="info-label">联系电话:</span>
  26. <span class="pull-right">{{ userInfo.phone }}</span>
  27. </li>
  28. </div>
  29. <div class="info-row">
  30. <li class="info-item">
  31. <Icon class="mr-5px" icon="fontisto:email" />
  32. <span class="info-label">邮箱:</span>
  33. <span class="pull-right">{{ userInfo.email }}</span>
  34. </li>
  35. <li class="info-item">
  36. <Icon class="mr-5px" icon="ep:location" />
  37. <span class="info-label">工作间地址:</span>
  38. <span class="pull-right">{{ userInfo.address }}</span>
  39. </li>
  40. </div>
  41. <div class="info-row">
  42. <li class="info-item">
  43. <Icon class="mr-5px" icon="fontisto:email" />
  44. <span class="info-label">导师人数:</span>
  45. <span class="pull-right">{{ userInfo.supervisorNum }}</span>
  46. </li>
  47. <li class="info-item">
  48. <Icon class="mr-5px" icon="ep:user" />
  49. <span class="info-label">学生人数:</span>
  50. <span class="pull-right">{{ userInfo.studentNum }}</span>
  51. </li>
  52. </div>
  53. <!-- <div>
  54. <li class="info-item">
  55. <Icon class="mr-5px" icon="ep:user" />
  56. <span class="info-label">工作间简介:</span>
  57. <span class="pull-right">{{ userInfo.description }}</span>
  58. </li>
  59. </div> -->
  60. </ul>
  61. <div class="info-description">
  62. <!-- <Icon class="mr-5px" icon="ep:location" /> -->
  63. <div class="div-label" style="margin-left: 20px;">简介:</div>
  64. <div class="description-content">{{ cleanedDescription }}</div>
  65. </div>
  66. <div class="button-container">
  67. <el-button type="primary" @click="openDialog">修改</el-button>
  68. </div>
  69. </el-card>
  70. <DeptForm
  71. ref="formRef"
  72. :visible="dialogVisible"
  73. :form="form"
  74. :rules="rules"
  75. @update:visible="dialogVisible = $event"
  76. @success="handleSuccess"
  77. />
  78. <!-- <el-card class="workspace-info ml-3 w-2/3">
  79. <template #header>
  80. <div class="card-header">
  81. <span>{{ userInfo.name }}</span>
  82. </div>
  83. </template>
  84. <el-form ref="formRef" :model="form" label-width="100px" :rules="rules" style="margin-left: 5%; margin-right: 5%;;">
  85. <el-form-item>
  86. <template #label>
  87. <span style="font-weight: bold;">负责人信息</span>
  88. </template>
  89. <span style="font-weight: bold;">------</span>
  90. </el-form-item>
  91. <el-form-item label="负责人名称" prop="leaderUserId">
  92. <el-select
  93. v-model="form.leaderUserId"
  94. @change="handleSupervisorChange"
  95. placeholder="请选择负责人"
  96. clearable
  97. filterable
  98. multiple
  99. :disabled="!isEditMode"
  100. >
  101. <el-option
  102. v-for="user in users"
  103. :key="user.id"
  104. :label="user.nickname"
  105. :value="user.id"
  106. />
  107. </el-select>
  108. </el-form-item>
  109. <el-form-item>
  110. <template #label>
  111. <span style="font-weight: bold;">工作间信息</span>
  112. </template>
  113. <span style="font-weight: bold;">------</span>
  114. </el-form-item>
  115. <el-form-item label="工作室号码" prop="phone">
  116. <el-input v-model="form.phone" :disabled="!isEditMode"/>
  117. </el-form-item>
  118. <el-form-item label="工作室邮箱" prop="email">
  119. <el-input v-model="form.email" :disabled="!isEditMode"/>
  120. </el-form-item>
  121. <el-form-item label="工作间地址" prop="address">
  122. <el-input v-model="form.address" :disabled="!isEditMode"/>
  123. </el-form-item>
  124. <el-form-item label="工作间名称" prop="name">
  125. <el-input v-model="form.name" :disabled="!isEditMode"/>
  126. </el-form-item>
  127. <el-form-item label="工作间简介" prop="description">
  128. <el-input type="textarea" v-model="form.description" :disabled="!isEditMode"/>
  129. </el-form-item>
  130. <el-form-item>
  131. <el-button type="primary" @click="toggleEditMode">{{ isEditMode ? '保存' : '修改' }}</el-button>
  132. <el-button type="primary" @click="submit">保存</el-button> -->
  133. <!-- <el-button type="danger" @click="init">重置</el-button>
  134. </el-form-item>
  135. </el-form>
  136. </el-card> -->
  137. </div>
  138. </template>
  139. <script lang="ts">
  140. import { defineComponent, reactive, ref, onMounted } from 'vue';
  141. import type { FormRules } from 'element-plus';
  142. // import type { FormExpose } from '@/components/Form'
  143. import { useI18n } from 'vue-i18n';
  144. import { useMessage } from '@/hooks/web/useMessage';
  145. import { updateDept, DeptVO, getUserDept } from '@/api/system/dept/index';
  146. import * as UserApi from '@/api/system/user'
  147. import DeptForm from './DeptForm.vue';
  148. export default defineComponent({
  149. components: {
  150. DeptForm
  151. },
  152. setup() {
  153. const { t } = useI18n();
  154. const message = useMessage();
  155. const dialogVisible = ref(false);
  156. const formRef = ref();
  157. const form = reactive({
  158. id: '',
  159. supervisor: '',
  160. phone: '',
  161. email: '',
  162. address: '',
  163. name: '',
  164. leaderUserId: [],
  165. nickname: '',
  166. description: '',
  167. });
  168. // 表单校验规则
  169. const rules = reactive<FormRules>({
  170. leaderUserId: [
  171. { required: true, message: '请选择导师名称', trigger: 'blur' }
  172. ],
  173. phone: [
  174. { required: true, message: '请输入负责人电话', trigger: 'blur' },
  175. {
  176. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  177. message: '请输入正确的手机号码',
  178. trigger: 'blur'
  179. }
  180. ],
  181. email: [
  182. { required: true, message: '请输入邮箱', trigger: 'blur' },
  183. {
  184. type: 'email',
  185. message: '请输入正确的邮箱格式',
  186. trigger: ['blur', 'change']
  187. }
  188. ],
  189. address: [
  190. { required: true, message: '请输入工作间地址', trigger: 'blur' }
  191. ],
  192. name: [
  193. { required: true, message: '请输入工作间名称', trigger: 'blur' }
  194. ],
  195. description: [
  196. { required: false, message: '请输入工作间简介', trigger: 'blur' }
  197. ],
  198. });
  199. // 将 userInfo 定义放入 setup 中
  200. const userInfo = ref({} as DeptVO);
  201. const fetchUserInfo = async () => {
  202. const users = await getUserDept();
  203. console.log(users,'userInfo');
  204. userInfo.value = {...users,
  205. // name: users.user[0].nickname // 提取 nickname
  206. };
  207. };
  208. // //获取所有导师
  209. // const users = ref()
  210. // const getSupervisor= async () => {
  211. // try {
  212. // const response = await UserApi.getSupervisor()
  213. // users.value = response
  214. // } catch (error) {
  215. // console.error('Error fetching user data:', error)
  216. // }
  217. // }
  218. // //传supervisorId给form.leaderUserId
  219. // const handleSupervisorChange = (values) => {
  220. // form.leaderUserId = values; // values 是选择的用户ID数组
  221. // }
  222. // const isEditMode = ref(false);
  223. // // 切换编辑模式
  224. // const toggleEditMode = () => {
  225. // if (isEditMode.value) {
  226. // // 在“保存”状态下执行保存操作
  227. // submit();
  228. // }
  229. // isEditMode.value = !isEditMode.value;
  230. // };
  231. const openDialog = () => {
  232. dialogVisible.value = true;
  233. formRef.value.open(); // 打开弹窗
  234. };
  235. const handleSuccess = () => {
  236. dialogVisible.value = false;
  237. };
  238. // 创建一个 computed 属性来处理并去掉 <p> 标签
  239. const cleanedDescription = computed(() => {
  240. return userInfo.value.description ? userInfo.value.description.replace(/<\/?[^>]+(>|$)/g, '') : '';
  241. });
  242. // 表单提交
  243. const submit = async () => {
  244. try {
  245. await formRef.value?.validate();
  246. console.log('提交的数据:', form);
  247. await updateDept(form).then((res) => {
  248. console.log('更新成功:', res);
  249. });
  250. message.success('成功');
  251. } catch (error) {
  252. console.error('提交错误:', error);
  253. message.error('错误');
  254. }
  255. };
  256. // 表单重置
  257. const init = async () => {
  258. const res = await getUserDept();
  259. console.log('获取的数据:', res);
  260. form.id = res.id;
  261. form.address = res.address;
  262. form.supervisor = res.user.nickname;
  263. form.phone = res.phone;
  264. form.email = res.email;
  265. form.name = res.name;
  266. form.leaderUserId = res.user.id;
  267. form.description = res.description;
  268. userInfo.value = res.user;
  269. };
  270. onMounted(async () => {
  271. await init();
  272. await fetchUserInfo();
  273. // getSupervisor();
  274. });
  275. return {
  276. t,
  277. form,
  278. userInfo,
  279. // isEditMode,
  280. // toggleEditMode,
  281. submit,
  282. init,
  283. rules,
  284. formRef,
  285. // users,
  286. // handleSupervisorChange,
  287. // getSupervisor,
  288. cleanedDescription,
  289. dialogVisible,
  290. openDialog,
  291. handleSuccess,
  292. };
  293. }
  294. });
  295. </script>
  296. <style scoped>
  297. .label-bold {
  298. font-weight: bold; /* 设置字体加粗 */
  299. }
  300. .workspace-name {
  301. height: 20px;
  302. }
  303. .card-header {
  304. display: flex;
  305. justify-content: center;
  306. align-items: center;
  307. }
  308. .user-info {
  309. margin-top: 10px;
  310. margin-left: 5%;
  311. margin-right: 5%;
  312. padding-right: 0;
  313. padding-left: 0;
  314. border-right: 0;
  315. border-left: 0;
  316. border-radius: 0;
  317. list-style: none;
  318. }
  319. .info-row {
  320. display: flex;
  321. justify-content: space-between; /* 保持并排显示 */
  322. align-items: center; /* 垂直居中对齐 */
  323. margin-bottom: 20px; /* 增加行之间的间距 */
  324. }
  325. .info-item {
  326. flex: 1; /* 每个信息项占据相同的空间 */
  327. padding: 11px 0; /* 内部上下填充 */
  328. margin-right: 50px; /* 每个信息项之间的右边距 */
  329. }
  330. /* 仅为每个信息项添加底部边框 */
  331. .info-item:first-child {
  332. border-bottom: 1px solid #e7eaec;
  333. }
  334. .info-item:last-child {
  335. border-bottom: 1px solid #e7eaec;
  336. }
  337. .info-description {
  338. margin-top: 30px; /* 与上面的信息分隔 */
  339. margin-left: 5%; /* 左侧与上面列表保持一致 */
  340. margin-right: 5%; /* 右侧与上面列表保持一致 */
  341. /* display: flex; */
  342. align-items: center; /* 确保标题与描述对齐 */
  343. align-items: flex-start;
  344. }
  345. .info-label {
  346. font-weight: bold; /* 加粗标题 */
  347. margin-right: 10px; /* 标题与内容之间的间距 */
  348. }
  349. .div-label {
  350. font-weight: bold; /* 加粗标题 */
  351. display: block;
  352. }
  353. .description-content {
  354. white-space: pre-wrap; /* 保持换行 */
  355. overflow-wrap: break-word; /* 自动断行 */
  356. margin-right: 5%;
  357. font-size: 13px; /* 根据需要设置字体大小 */
  358. margin-top: 20px; /* 内容与标题之间不需要额外间距 */
  359. letter-spacing: 3px;
  360. text-indent: 2em;
  361. line-height: 2;
  362. }
  363. .pull-right {
  364. float: right !important;
  365. }
  366. .info-label {
  367. font-weight: bold;
  368. }
  369. .personal-info {
  370. margin-top: 20px;
  371. }
  372. .button-container {
  373. display: flex;
  374. justify-content: center; /* 水平居中 */
  375. margin-top: 30px; /* 上间距 */
  376. }
  377. </style>