companyInfo.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <template>
  2. <div class="bg-white dark:!bg-[#060818]">
  3. <el-tabs type="border-card" class="bg-gray-100 dark:bg-[#060818]">
  4. <el-tab-pane label="公司信息" class="custom-tab-pane">
  5. <el-form :model="companyForm" :rules="stockRules" ref="companyFormRef" label-width="140px">
  6. <el-row>
  7. <el-col :span="6">
  8. <el-form-item label="当前套餐:" prop="company_package_id">
  9. <el-select v-model="companyForm.company_package_id" clearable placeholder="请选择套餐">
  10. <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. <!-- user_num -->
  15. <el-col :span="5">
  16. <el-form-item label="套餐到期时间:" prop="name">
  17. {{ companyForm.end_use_time }}
  18. </el-form-item>
  19. </el-col>
  20. <el-col :span="5">
  21. <el-form-item label="可绑定账户数:" prop="name">
  22. {{ companyForm.user_num }}
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="10">
  26. <el-form-item label="公司名称:" prop="name">
  27. <el-input v-model="companyForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入公司名称"></el-input>
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="10">
  31. <el-form-item label="统一社会信用代码:" prop="credit_code">
  32. <el-input v-model="companyForm.credit_code" :minlength="2" :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input>
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="10">
  36. <el-form-item label="行业:" prop="industry">
  37. <el-input v-model="companyForm.industry" :minlength="2" :maxlength="20" clearable placeholder="请输入行业"></el-input>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="10">
  41. <el-form-item label="联系人:" prop="user_name">
  42. <el-input v-model="companyForm.user_name" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人"></el-input>
  43. </el-form-item>
  44. </el-col>
  45. <el-col :span="10">
  46. <el-form-item label="联系人电话:" prop="phone">
  47. <el-input v-model="companyForm.phone" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人电话"></el-input>
  48. </el-form-item>
  49. </el-col>
  50. <el-col :span="10">
  51. <el-form-item label="邮箱:" prop="email">
  52. <el-input v-model="companyForm.email" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="10">
  56. <el-form-item label="邮编:" prop="postal_code">
  57. <el-input v-model="companyForm.postal_code" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
  58. </el-form-item>
  59. </el-col>
  60. <el-col :span="10">
  61. <el-form-item label="官网:" prop="website">
  62. <el-input v-model="companyForm.website" :minlength="2" :maxlength="20" clearable placeholder="请输入官网地址"></el-input>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="10">
  66. <el-form-item label="地址:" prop="">
  67. <el-cascader class="w-full" size="default" :options="options" clearable v-model="selectedOptions"> </el-cascader>
  68. <span>
  69. <el-input class="!w-full mt-3" v-model="companyForm.address" placeholder="请输入"></el-input>
  70. </span>
  71. </el-form-item>
  72. </el-col>
  73. <el-col :span="10">
  74. <el-form-item label="营业执照:" prop="license">
  75. <el-upload
  76. class="avatar-uploader"
  77. :action="uploadUrl"
  78. :show-file-list="false"
  79. :on-success="handleAvatarSuccess"
  80. :before-upload="beforeAvatarUpload"
  81. >
  82. <img v-if="companyForm.license" :src="companyForm.license" class="avatar w-28 h-28" />
  83. <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  84. </el-upload>
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. </el-form>
  89. <div class="flex justify-center"><el-button type="primary" @click="submitWarehouseForm">保 存</el-button></div>
  90. </el-tab-pane>
  91. <el-tab-pane label="个人信息" class="custom-tab-pane">
  92. <el-form :model="infoForm" :rules="stockRules" ref="infoFormRef" label-width="140px">
  93. <el-row>
  94. <el-col :span="16">
  95. <el-form-item label="名称:" prop="nickname">
  96. {{ infoForm.nickname }}
  97. <!-- <el-input v-model="infoForm.nickname" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入公司名称"></el-input> -->
  98. </el-form-item>
  99. </el-col>
  100. <el-col :span="16">
  101. <el-form-item label="登录昵称:" prop="username">
  102. {{ infoForm.username }}
  103. <!-- <el-input v-model="infoForm.username" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input> -->
  104. </el-form-item>
  105. </el-col>
  106. <el-col :span="16">
  107. <el-form-item label="手机号:" prop="phone">
  108. {{ infoForm.phone }}
  109. <!-- <el-input v-model="infoForm.phone" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入联系人电话"></el-input> -->
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="16">
  113. <el-form-item label="邮箱:" prop="email">
  114. {{ infoForm.email }}
  115. <!-- <el-input v-model="infoForm.email" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入邮箱"></el-input> -->
  116. </el-form-item>
  117. </el-col>
  118. <!-- <el-col :span="16">
  119. <el-form-item label="部门:" prop="dept_id">
  120. {{ infoForm.dept_id }}
  121. </el-form-item>
  122. </el-col> -->
  123. <el-col :span="16">
  124. <el-form-item label="头像:" prop="face">
  125. <el-upload
  126. class="avatar-uploader"
  127. :action="uploadUrl"
  128. :show-file-list="false"
  129. :on-success="handleInfoSuccess"
  130. :before-upload="beforeInfoUpload"
  131. >
  132. <img v-if="infoForm.face" :src="infoForm.face" class="avatar w-28 h-28" />
  133. <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  134. </el-upload>
  135. </el-form-item>
  136. </el-col>
  137. </el-row>
  138. </el-form>
  139. <div class="flex justify-center"><el-button type="primary" @click="submitInfo">保 存</el-button></div>
  140. </el-tab-pane>
  141. </el-tabs>
  142. </div>
  143. </template>
  144. <script lang="ts" setup>
  145. import { ref, onMounted } from 'vue';
  146. import * as API_Company from '@/api/company';
  147. import * as API_Package from '@/api/package';
  148. import * as API_Auth from '@/api/auth';
  149. import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
  150. import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
  151. import type { UploadProps } from 'element-plus';
  152. import { useStore } from 'vuex';
  153. import { submit } from '@/api/goodsInventoryLoss';
  154. const store = useStore();
  155. const tableData = ref<any>({});
  156. const uploadUrl = ref(import.meta.env.VITE_API_URL + '/uploaders');
  157. const companyForm = ref<any>({
  158. role_id: '',
  159. name: '',
  160. money: '',
  161. day: '',
  162. use_able: false,
  163. remark: '',
  164. address: '',
  165. license: '',
  166. company_package_id: '',
  167. });
  168. const stockRules = ref();
  169. const options = ref<any[]>(regionData);
  170. const selectedOptions = ref<any[]>([]);
  171. const loading = ref(false);
  172. const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  173. console.log(response, uploadFile);
  174. companyForm.value.license = response.url; //URL.createObjectURL(uploadFile.raw!);
  175. };
  176. const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  177. if (rawFile.size / 1024 / 1024 > 10) {
  178. ElMessage.error('Avatar picture size can not exceed 10MB!');
  179. return false;
  180. }
  181. return true;
  182. };
  183. /* 个人信息详情 */
  184. const handleInfoSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  185. infoForm.value.face = response.url; //URL.createObjectURL(uploadFile.raw!);
  186. };
  187. const beforeInfoUpload: UploadProps['beforeUpload'] = (rawFile) => {
  188. if (rawFile.size / 1024 / 1024 > 10) {
  189. ElMessage.error('Avatar picture size can not exceed 10MB!');
  190. return false;
  191. }
  192. return true;
  193. };
  194. const adminName = (val: string[]) => {
  195. let text = '';
  196. console.log(val);
  197. if (val !== undefined) {
  198. text += codeToText[val[0]];
  199. text += codeToText[val[1]];
  200. text += codeToText[val[2]];
  201. }
  202. return text;
  203. };
  204. const companyFormRef = ref();
  205. const submitWarehouseForm = () => {
  206. companyFormRef.value.validate((valid: boolean) => {
  207. if (valid) {
  208. const params = { ...companyForm.value };
  209. params.province = selectedOptions.value.join(',');
  210. API_Company.editCompany(companyForm.value.id, params).then(() => {
  211. ElMessage.success('修改成功!');
  212. GET_CompanyList();
  213. });
  214. } else {
  215. ElMessage.error('表单填写有误,请核对!');
  216. /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
  217. return false;
  218. }
  219. });
  220. };
  221. const GET_CompanyList = () => {
  222. loading.value = true;
  223. API_Company.getOne('1811346086001057794')
  224. .then((response) => {
  225. loading.value = false;
  226. selectedOptions.value = response.province.split(',');
  227. /* response.records.map((el: any) => {
  228. if (el.province !== undefined) {
  229. el.license = el.license.replace('blob:', '');
  230. el.province = el.province.split(',');
  231. }
  232. return el;
  233. }); */
  234. companyForm.value = response;
  235. console.log(companyForm.value);
  236. })
  237. .catch(() => {
  238. loading.value = false;
  239. });
  240. };
  241. const packageList = ref<any>([]);
  242. const GET_PackageList = () => {
  243. API_Package.packageList({ page_no: 1, page_size: 1000, use_able: true }).then((res) => {
  244. packageList.value = res.records;
  245. });
  246. };
  247. /* 获取当前登录人详情 */
  248. const infoForm = ref<any>({
  249. face: '',
  250. });
  251. let imgUrl = ref<any>('');
  252. const GET_Info = () => {
  253. API_Auth.getAdministratorDetail(store.state.user.user.uid).then((res) => {
  254. infoForm.value = res;
  255. imgUrl.value = res.face;
  256. });
  257. };
  258. const submitInfo = () => {
  259. if (infoForm.value.face == undefined) {
  260. return ElMessage.error('请上传头像!');
  261. } else if (infoForm.value.face == imgUrl.value) {
  262. return ElMessage.error('请上传新的头像!');
  263. }
  264. API_Auth.editAdministrator(store.state.user.user.uid, { face: infoForm.value.face }).then((res) => {
  265. ElMessage.success('修改成功!');
  266. GET_Info();
  267. });
  268. };
  269. onMounted(() => {
  270. GET_CompanyList();
  271. GET_PackageList();
  272. GET_Info();
  273. });
  274. </script>
  275. <style scoped >
  276. .container {
  277. background-color: #fff;
  278. padding: 10px;
  279. position: relative;
  280. }
  281. .site-tag {
  282. margin: 0 3px;
  283. }
  284. .site-new-tag-input {
  285. width: 100px;
  286. }
  287. :deep(.site-logo .el-upload) {
  288. border: 1px dashed #d9d9d9;
  289. border-radius: 6px;
  290. cursor: pointer;
  291. position: relative;
  292. overflow: hidden;
  293. /* &:hover {
  294. border-color: #409eff;
  295. } */
  296. }
  297. .logo-uploader-icon {
  298. font-size: 20px;
  299. color: #8c939d;
  300. width: 120px;
  301. height: 120px;
  302. line-height: 120px;
  303. text-align: center;
  304. }
  305. .site-logo-img {
  306. width: 120px;
  307. height: 120px;
  308. display: block;
  309. }
  310. .image-pane .el-input-group {
  311. width: 200px;
  312. }
  313. .point-pane .el-input-group {
  314. width: 200px;
  315. }
  316. .custom-tabs {
  317. @apply dark:bg-[#060818];
  318. }
  319. :deep(.el-tabs__header) {
  320. @apply dark:bg-[#060818];
  321. }
  322. :deep(.custom-tab-pane) {
  323. @apply dark:bg-[#060818];
  324. }
  325. :deep(.el-tabs__item.is-active) {
  326. @apply dark:bg-[#060818]; /* 替换为你想要的 Tailwind CSS 背景色类 */
  327. }
  328. </style>