index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
  1. <template>
  2. <div class="app-container">
  3. <div ref="sousuH">
  4. <!-- 搜索工作栏 -->
  5. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
  6. <el-form-item label="区县" prop="county">
  7. <el-input v-model="queryParams.county" placeholder="请输入区县" clearable @keyup.enter.native="handleQuery" />
  8. </el-form-item>
  9. <el-form-item label="社区/单位名称" prop="microName">
  10. <el-input v-model="queryParams.microName" placeholder="请输入社区/单位名称" clearable
  11. @keyup.enter.native="handleQuery" />
  12. </el-form-item>
  13. <el-form-item label="建站日期" prop="builtOn">
  14. <el-date-picker clearable v-model="queryParams.builtOn" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
  15. placeholder="建站日期" />
  16. <!-- <el-input v-model="queryParams.builtOn" placeholder="请输入建站日期" clearable @keyup.enter.native="handleQuery" /> -->
  17. </el-form-item>
  18. <el-form-item label="负责人(站长)" prop="charger">
  19. <el-input v-model="queryParams.charger" placeholder="请输入负责人(站长)" clearable @keyup.enter.native="handleQuery" />
  20. </el-form-item>
  21. <el-form-item label="报警电话" prop="alarmTel">
  22. <el-input v-model="queryParams.alarmTel" placeholder="请输入报警电话" clearable @keyup.enter.native="handleQuery" />
  23. </el-form-item>
  24. <!-- <el-form-item label="状态" prop="status">
  25. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
  26. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
  27. :value="dict.value" />
  28. </el-select>
  29. </el-form-item> -->
  30. <el-form-item>
  31. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  32. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  33. </el-form-item>
  34. </el-form>
  35. <!-- 操作工具栏 -->
  36. <el-row :gutter="10" class="mb8">
  37. <!-- <el-col :span="1.5">
  38. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  39. v-hasPermi="['backend:micro-station:create']">新增</el-button>
  40. </el-col>
  41. <el-col :span="1.5">
  42. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
  43. :loading="exportLoading" v-hasPermi="['backend:micro-station:export']">导出</el-button>
  44. </el-col> -->
  45. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  46. </el-row>
  47. </div>
  48. <!-- 列表 -->
  49. <!-- <el-table v-loading="loading" :data="list" :height="list.length ? tableHeight : 'auto'"> -->
  50. <el-table v-loading="loading" :data="list">
  51. <el-table-column label="ID" align="center" prop="id" />
  52. <el-table-column label="区县" align="center" prop="county" />
  53. <el-table-column label="社区/单位名称" align="center" prop="microName" width="200">
  54. <template v-slot="scope">
  55. <span style="color: forestgreen" @click="showOpentabs(scope.row)">{{ scope.row.microName }}</span>
  56. </template>
  57. </el-table-column>
  58. <!-- <el-table-column label="社区/单位名称" align="center" prop="microName" width="120"/> -->
  59. <el-table-column label="详细地址" align="center" prop="addr" />
  60. <el-table-column label="建站日期" align="center" prop="builtOn" width="180">
  61. <template v-slot="scope">
  62. <span>{{ parseTime(scope.row.builtOn) }}</span>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="负责人(站长)" align="center" prop="charger" width="120" />
  66. <el-table-column label="报警电话" align="center" prop="alarmTel" />
  67. <el-table-column label="队员数" align="center" prop="members" />
  68. <el-table-column label="控制室值班人员" align="center" prop="dutyer" width="130" />
  69. <el-table-column label="水罐车" align="center" prop="waterTanker" />
  70. <el-table-column label="泡沫车" align="center" prop="foamCar" />
  71. <el-table-column label="消防摩托" align="center" prop="fireMoto" />
  72. <el-table-column label="其它" align="center" prop="others" />
  73. <!-- <el-table-column label="状态" align="center" prop="status">
  74. <template v-slot="scope">
  75. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
  76. </template>
  77. </el-table-column> -->
  78. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
  79. <template v-slot="scope">
  80. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  81. v-hasPermi="['backend:micro-station:update']">修改</el-button>
  82. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  83. v-hasPermi="['backend:micro-station:delete']">删除</el-button>
  84. <el-button type="text" size="mini" @click="searchAllPeople(scope.row)">查看现有人员</el-button>
  85. </template>
  86. </el-table-column>
  87. </el-table>
  88. <!-- 分页组件 -->
  89. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  90. @pagination="getList" />
  91. <!-- 对话框(添加 / 修改) -->
  92. <el-dialog :title="title" :visible.sync="open" width="60%" v-dialogDrag append-to-body class="details">
  93. <el-form ref="form" :model="form" :rules="rules" label-width="auto">
  94. <el-row :gutter="20">
  95. <el-col :span="11">
  96. <el-form-item label="区县" prop="county">
  97. <el-input v-model="form.county" placeholder="请输入区县" />
  98. </el-form-item></el-col>
  99. <el-col :span="11">
  100. <el-form-item label="社区/单位名称" prop="microName">
  101. <el-input v-model="form.microName" placeholder="请输入社区/单位名称" />
  102. </el-form-item></el-col>
  103. </el-row>
  104. <el-row :gutter="20">
  105. <el-col :span="11">
  106. <el-form-item label="详细地址" prop="addr">
  107. <el-input v-model="form.addr" placeholder="请输入详细地址" />
  108. </el-form-item></el-col>
  109. <el-col :span="11">
  110. <el-form-item label="建站日期" prop="builtOn">
  111. <el-date-picker clearable v-model="form.builtOn" type="date" value-format="timestamp" placeholder="建站日期"
  112. style="width: 100%;" />
  113. </el-form-item></el-col>
  114. </el-row>
  115. <el-row :gutter="20">
  116. <el-col :span="11">
  117. <el-form-item label="负责人(站长)" prop="charger">
  118. <el-input v-model="form.charger" placeholder="请输入负责人(站长)" />
  119. </el-form-item>
  120. </el-col>
  121. <!-- <el-col :span="5"> -->
  122. <!-- <el-button type="primary" size="small" @click="addNewPeople">新增人员</el-button> -->
  123. <!-- <el-button type="primary" size="small" @click="submitFormBut">提交新人员</el-button> -->
  124. <!-- </el-col> -->
  125. <el-col :span="11">
  126. <el-form-item label="报警电话" prop="alarmTel">
  127. <el-input v-model="form.alarmTel" placeholder="请输入报警电话" />
  128. </el-form-item></el-col>
  129. </el-row>
  130. <el-row v-for="(item, index) in formItems" :key="index" :gutter="20">
  131. <el-col :span="11">
  132. <el-form-item :label="item.label" :prop="item.prop">
  133. <el-input v-model="item.value" :placeholder="item.placeholder" />
  134. </el-form-item>
  135. </el-col>
  136. </el-row>
  137. <el-row :gutter="20">
  138. <el-col :span="11">
  139. <el-form-item label="队员数" prop="members">
  140. <el-input v-model="form.members" placeholder="请输入队员数" />
  141. </el-form-item></el-col>
  142. <el-col :span="11">
  143. <el-form-item label="控制室值班人员" prop="dutyer">
  144. <el-input v-model="form.dutyer" placeholder="请输入控制室值班人员" />
  145. </el-form-item></el-col>
  146. </el-row>
  147. <el-row :gutter="20">
  148. <el-col :span="11">
  149. <el-form-item label="水罐车" prop="waterTanker">
  150. <el-input v-model="form.waterTanker" placeholder="请输入水罐车" />
  151. </el-form-item></el-col>
  152. <el-col :span="11">
  153. <el-form-item label="泡沫车" prop="foamCar">
  154. <el-input v-model="form.foamCar" placeholder="请输入泡沫车" />
  155. </el-form-item></el-col>
  156. </el-row>
  157. <el-row :gutter="20">
  158. <el-col :span="11">
  159. <el-form-item label="消防摩托" prop="fireMoto">
  160. <el-input v-model="form.fireMoto" placeholder="请输入消防摩托" />
  161. </el-form-item></el-col>
  162. <el-col :span="11">
  163. <el-form-item label="其它" prop="others">
  164. <el-input v-model="form.others" placeholder="请输入其它" />
  165. </el-form-item></el-col>
  166. </el-row>
  167. <!-- <el-row>
  168. <el-col :span="12">
  169. <el-form-item label="状态" prop="status">
  170. <el-radio-group v-model="form.status" style="width: 100%;">
  171. <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
  172. :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
  173. </el-radio-group>
  174. </el-form-item>
  175. </el-col>
  176. <el-col :span="12"></el-col>
  177. </el-row> -->
  178. </el-form>
  179. <div slot="footer" class="dialog-footer">
  180. <el-button type="primary" @click="submitForm">确 定</el-button>
  181. <el-button @click="cancel">取 消</el-button>
  182. </div>
  183. </el-dialog>
  184. <el-dialog :visible.sync="opentabs" width="85vw" append-to-body v-if="opentabs" :title="`单位名称:${opentabsTitle}`">
  185. <microStationEvent :microId="microId"></microStationEvent>
  186. </el-dialog>
  187. <!-- 查看人员的模态框 -->
  188. <el-dialog title="现有人员" :visible.sync="lookFirePeople" width="50%">
  189. <el-table :data="firePeople" border style="width: 100%">
  190. <el-table-column prop="empName" label="姓名" width="120">
  191. </el-table-column>
  192. <el-table-column label="人员类型" width="120">
  193. <template scope="scope">
  194. <!-- <span>{{ scope.row.empType }}</span> -->
  195. <span>{{ countType || scope.row.empType }}</span>
  196. </template>
  197. </el-table-column>
  198. <el-table-column prop="idcardno" label="身份证" width="120">
  199. </el-table-column>
  200. <el-table-column prop="mobile" label="电话号" width="300">
  201. </el-table-column>
  202. <el-table-column fixed="right" label="操作" width="100">
  203. <template slot-scope="scope">
  204. <el-button @click="editPeople(scope.row)" type="text" size="small">编辑</el-button>
  205. <el-button type="text" size="small" @click="delPeople(scope.row)">删除</el-button>
  206. </template>
  207. </el-table-column>
  208. </el-table>
  209. <span slot="footer" class="dialog-footer">
  210. <el-button @click="lookFirePeople = false">取 消</el-button>
  211. <el-button type="primary" @click="makeSureFire">确 定</el-button>
  212. </span>
  213. </el-dialog>
  214. <!-- 内层修改模态框 -->
  215. <el-dialog title="编辑人员" :visible.sync="insideModal" width="50%">
  216. <el-form ref="form" :model="insideForm" label-width="80px">
  217. <el-form-item label="姓名">
  218. <el-input v-model="insideForm.name" @blur="nameBlur"></el-input>
  219. <span v-if="nameRule" style="color: red;font-size: 12px;">名字不能为空</span>
  220. </el-form-item>
  221. <el-form-item label="人员类型">
  222. <!-- <el-input v-model="insideForm.type"></el-input> -->
  223. <el-select v-model="insideForm.type" placeholder="请选择">
  224. <el-option key="0" label="普通人员" value="0" />
  225. <el-option key="1" label="值班人员" value="1" />
  226. <el-option key="2" label="站长" value="2" />
  227. </el-select>
  228. </el-form-item>
  229. <el-form-item label="身份证">
  230. <el-input v-model="insideForm.idcard" @blur="idcardBlur"></el-input>
  231. <span v-if="idcardRule" style="color: red;font-size: 12px;">身份证号有误</span>
  232. </el-form-item>
  233. <el-form-item label="电话号">
  234. <el-input v-model="insideForm.phone" @blur="phoneBlur"></el-input>
  235. <span v-if="phoneRule" style="color: red;font-size: 12px;">电话号有误</span>
  236. </el-form-item>
  237. </el-form>
  238. <span slot="footer" class="dialog-footer">
  239. <el-button @click="insideModal = false">取 消</el-button>
  240. <el-button type="primary" @click="insideSure">确 定</el-button>
  241. </span>
  242. </el-dialog>
  243. </div>
  244. </template>
  245. <script>
  246. import { createMicroStation, updateMicroStation, deleteMicroStation, getMicroStation, getMicroStationPage, exportMicroStationExcel } from "@/api/backend/microStation"
  247. import { getTableHeight } from "@/utils/ruoyi.js";
  248. import { getAllPeople, delFirePeople, editFirePeople } from '@/api/miniFirestation/index'
  249. import microStationEvent from "@/views/backend/microStationEvent/index";
  250. export default {
  251. name: "MicroStation",
  252. components: {
  253. microStationEvent
  254. },
  255. data() {
  256. return {
  257. microId: '',
  258. opentabs: false,
  259. opentabsTitle: '',
  260. // 遮罩层
  261. loading: true,
  262. // 导出遮罩层
  263. exportLoading: false,
  264. // 显示搜索条件
  265. showSearch: true,
  266. // 总条数
  267. total: 0,
  268. // 微型消防站列表
  269. list: [],
  270. // 弹出层标题
  271. title: "",
  272. // 是否显示弹出层
  273. open: false,
  274. // 查询参数
  275. queryParams: {
  276. pageNo: 1,
  277. pageSize: 10,
  278. county: null,
  279. microName: null,
  280. builtOn: null,
  281. charger: null,
  282. alarmTel: null,
  283. status: null,
  284. },
  285. // 表单参数
  286. form: {
  287. status: 0
  288. },
  289. // 表单校验
  290. rules: {
  291. status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  292. },
  293. tableHeight: "",
  294. formItems: [], // 存储表单项的数据
  295. lookFirePeople: false,
  296. firePeople: [],
  297. insideModal: false,
  298. insideForm: {
  299. name: "",
  300. type: "",
  301. idcard: "",
  302. phone: ""
  303. },
  304. insideUpdateId: '',
  305. nameRule: false,
  306. idcardRule: false,
  307. phoneRule: false,
  308. firestationid: "",
  309. }
  310. },
  311. props: ["orgId"],
  312. watch: {
  313. orgId: { //深度监听,可监听到对象、数组的变化
  314. handler(newV, oldV) {
  315. this.getList()
  316. },
  317. deep: true
  318. }
  319. },
  320. mounted() {
  321. //挂载window.onresize事件(动态设置table高度)
  322. window.addEventListener('resize', () => {
  323. this.$nextTick(() => {
  324. if (this.$refs['sousuH']) {
  325. this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
  326. }
  327. })
  328. })
  329. },
  330. created() {
  331. this.getList()
  332. this.$nextTick(() => {
  333. this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
  334. })
  335. },
  336. computed: {
  337. countType(num) {
  338. // return '456'
  339. if (num === '1') {
  340. return '值班人员'
  341. } else if (num === '2') {
  342. return '站长'
  343. } else {
  344. return '普通人员'
  345. }
  346. }
  347. },
  348. methods: {
  349. showOpentabs(micro) {
  350. this.microId = micro.id
  351. this.opentabs = true
  352. this.opentabsTitle = micro.microName
  353. },
  354. /** 查询列表 */
  355. getList() {
  356. this.loading = true
  357. // 执行查询
  358. this.queryParams.orgId = this.orgId
  359. getMicroStationPage(this.queryParams).then(response => {
  360. this.list = response.data.list
  361. this.total = response.data.total
  362. this.loading = false
  363. })
  364. },
  365. /** 取消按钮 */
  366. cancel() {
  367. this.open = false
  368. this.reset()
  369. },
  370. /** 表单重置 */
  371. reset() {
  372. this.form = {
  373. id: undefined,
  374. county: undefined,
  375. microName: undefined,
  376. addr: undefined,
  377. builtOn: undefined,
  378. charger: undefined,
  379. alarmTel: undefined,
  380. members: undefined,
  381. dutyer: undefined,
  382. waterTanker: undefined,
  383. foamCar: undefined,
  384. fireMoto: undefined,
  385. others: undefined,
  386. status: 0,
  387. }
  388. this.resetForm("form")
  389. },
  390. /** 搜索按钮操作 */
  391. handleQuery() {
  392. this.queryParams.pageNo = 1
  393. this.getList()
  394. },
  395. /** 重置按钮操作 */
  396. resetQuery() {
  397. this.resetForm("queryForm")
  398. this.handleQuery()
  399. },
  400. /** 新增按钮操作 */
  401. handleAdd() {
  402. this.reset()
  403. this.open = true
  404. this.title = "添加微型消防站"
  405. },
  406. /** 修改按钮操作 */
  407. handleUpdate(row) {
  408. this.formItems = []
  409. this.reset()
  410. const id = row.id
  411. getMicroStation(id).then(response => {
  412. this.form = response.data
  413. this.open = true
  414. this.title = "修改微型消防站"
  415. })
  416. },
  417. /** 提交按钮 */
  418. submitForm() {
  419. const antherForm = this.formItems.map((item) => item.value);
  420. this.$refs["form"].validate((valid) => {
  421. if (!valid) {
  422. return
  423. }
  424. // 修改的提交
  425. if (this.form.id != null) {
  426. updateMicroStation(this.form).then((response) => {
  427. this.$modal.msgSuccess("修改成功")
  428. this.open = false
  429. this.getList()
  430. })
  431. return
  432. }
  433. // 添加的提交
  434. createMicroStation(this.form).then((response) => {
  435. this.$modal.msgSuccess("新增成功")
  436. this.open = false
  437. this.getList()
  438. })
  439. })
  440. },
  441. /** 删除按钮操作 */
  442. handleDelete(row) {
  443. const id = row.id
  444. this.$modal
  445. .confirm('是否确认删除商品分类编号为"' + id + '"的数据项?')
  446. .then(function () {
  447. return deleteMicroStation(id)
  448. })
  449. .then(() => {
  450. this.getList()
  451. this.$modal.msgSuccess("删除成功")
  452. })
  453. .catch(() => { })
  454. },
  455. /** 导出按钮操作 */
  456. handleExport() {
  457. // 处理查询参数
  458. let params = { ...this.queryParams }
  459. params.pageNo = undefined
  460. params.pageSize = undefined
  461. // 执行导出
  462. this.$modal
  463. .confirm("是否确认导出所有数据项?")
  464. .then(() => {
  465. this.exportLoading = true
  466. return exportMicroStationExcel(params)
  467. })
  468. .then((response) => {
  469. this.$download.excel(response, "微型消防站列表.xls")
  470. this.exportLoading = false
  471. })
  472. .catch(() => { })
  473. },
  474. addNewPeople() {
  475. // if (this.formItems.length < 24) {
  476. const newItem = [
  477. {
  478. label: `名字`,
  479. prop: `custom_${this.formItems.length + 1}`,
  480. value: '',
  481. placeholder: '请输入名字',
  482. },
  483. {
  484. label: '身份证号',
  485. prop: `custom_${this.formItems.length + 1}`,
  486. value: '',
  487. placeholder: '请输入身份证号',
  488. },
  489. {
  490. label: '电话',
  491. prop: `custom_${this.formItems.length + 1}`,
  492. value: '',
  493. placeholder: '请输入电话号码',
  494. },
  495. {
  496. label: '职务',
  497. prop: `custom_${this.formItems.length + 1}`,
  498. value: '',
  499. placeholder: '请输入职务',
  500. },
  501. ];
  502. this.formItems = this.formItems.concat(newItem);
  503. // } else {
  504. // // 达到最大数量,给出提示或执行其他操作
  505. // console.log('已达到最大数量');
  506. // console.log(this.formItems.length);
  507. // }
  508. },
  509. submitFormBut() {
  510. // 获取所有新增表单项的值
  511. const values = this.formItems.map((item) => item.value);
  512. console.log(values);
  513. // 执行其他操作,如提交表单
  514. },
  515. searchAllPeople(row) {
  516. this.firestationid = row.id
  517. getAllPeople({ pageNo: 1, pageSize: 10, microstationid: row.id }).then(res => {
  518. this.firePeople = res.data.list
  519. })
  520. this.lookFirePeople = true
  521. },
  522. makeSureFire() {
  523. this.lookFirePeople = false
  524. },
  525. delPeople(row) {
  526. delFirePeople(row.id).then(res => {
  527. if (res.data) {
  528. this.$message({
  529. message: '删除成功',
  530. type: 'success'
  531. });
  532. getAllPeople({ pageNo: 1, pageSize: 10, microstationid: this.firestationid }).then(res => {
  533. this.firePeople = res.data.list
  534. })
  535. }
  536. })
  537. // this.lookFirePeople = false
  538. },
  539. editPeople(row) {
  540. // console.log(row, 'inside');
  541. this.insideForm.name = row.empName
  542. this.insideForm.idcard = row.idcardno
  543. this.insideForm.phone = row.mobile
  544. this.insideForm.type = row.empType
  545. this.insideUpdateId = row.id
  546. this.insideModal = true
  547. },
  548. insideSure() {
  549. if (!(this.nameRule || this.phoneRule || this.idcardRule)) {
  550. // 当 nameRule、phoneRule 和 idcardRule 都为 false 时,执行这里的代码
  551. editFirePeople({ id: this.insideUpdateId, empName: this.insideForm.name, empType: this.insideForm.type, idcardno: this.insideForm.idcard, mobile: this.insideForm.phone }).then(res => {
  552. // console.log(res,'update');
  553. if (res.data) {
  554. this.$message({
  555. message: '修改成功',
  556. type: 'success'
  557. });
  558. this.insideModal = false
  559. this.lookFirePeople = false
  560. }
  561. })
  562. } else {
  563. this.$message({
  564. message: '请检查表单项',
  565. type: 'error'
  566. });
  567. }
  568. },
  569. nameBlur() {
  570. if (this.insideForm.name === '') {
  571. this.nameRule = true
  572. } else {
  573. this.nameRule = false
  574. }
  575. },
  576. idcardBlur() {
  577. const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$/;
  578. if (idCardRegex.test(this.insideForm.idcard)) {
  579. this.idcardRule = false
  580. } else {
  581. this.idcardRule = true
  582. }
  583. },
  584. phoneBlur() {
  585. console.log(211);
  586. const phoneRegex = /^1[3456789]\d{9}$/;
  587. if (phoneRegex.test(this.insideForm.phone)) {
  588. this.phoneRule = false
  589. } else {
  590. this.phoneRule = true
  591. }
  592. }
  593. }
  594. }
  595. </script>
  596. <style lang="scss" scoped>
  597. .details {
  598. ::v-deep .el-form-item__label,
  599. ::v-deep .el-form-item__content {
  600. font-size: 16px;
  601. color: #86909C;
  602. font-weight: 500;
  603. }
  604. ::v-deep .el-form-item__content {
  605. font-size: 14px;
  606. color: #444444 !important;
  607. }
  608. }
  609. </style>