index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. <template>
  2. <div class="app-container">
  3. <div class="app-container">
  4. <div class="filter-container">
  5. <el-select
  6. v-model="getdataListParm.parammaps.pastureName"
  7. placeholder="牧场"
  8. style="width:120px"
  9. class="filter-item"
  10. >
  11. <el-option
  12. v-for="item in findAllPasture"
  13. :key="item.id"
  14. :label="item.name"
  15. :value="item.name"
  16. />
  17. </el-select>
  18. <el-input v-model="getdataListParm.parammaps.empCode" placeholder="工号" style="width: 140px;" class="filter-item" />
  19. <el-input v-model="getdataListParm.parammaps.empname" placeholder="姓名" style="width: 140px;" class="filter-item" />
  20. <el-input v-model="getdataListParm.parammaps.position" placeholder="职位" style="width: 140px;" class="filter-item" />
  21. <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
  22. <el-button v-if="isEmpAdd" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="form_add">新增</el-button>
  23. <el-button class="filter-item" type="success" icon="el-icon-download" style="" @click="handleDownload">导出</el-button>
  24. </div>
  25. <el-table
  26. v-loading="listLoading"
  27. element-loading-text="给我一点时间"
  28. :data="list"
  29. border
  30. fit
  31. highlight-current-row
  32. style="width: 100%;"
  33. :row-style="rowStyle"
  34. :cell-style="cellStyle"
  35. class="elTable"
  36. row-key="id"
  37. default-expand-all
  38. :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  39. @sort-change="tableSort"
  40. >
  41. <el-table-column label="序号" align="center" type="index" width="50px">
  42. <template slot-scope="scope">
  43. <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="姓名" min-width="110px" header-align="center" align="center">
  47. <template slot-scope="scope">
  48. <span>{{ scope.row.empname }}</span>
  49. </template>
  50. </el-table-column>
  51. <el-table-column label="EAS账户名" header-align="center" width="120px" align="center">
  52. <template slot-scope="scope">
  53. <span>{{ scope.row.easName }}</span>
  54. </template>
  55. </el-table-column>
  56. <el-table-column label="牧场" min-width="100px" header-align="center" align="center">
  57. <template slot-scope="scope">
  58. <span>{{ scope.row.pastureName }}</span>
  59. </template>
  60. </el-table-column>
  61. <el-table-column label="部门" min-width="100px" header-align="center" align="center">
  62. <template slot-scope="scope">
  63. <span>{{ scope.row.deptname }}</span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="工号" min-width="100px" header-align="center" align="center">
  67. <template slot-scope="scope">
  68. <span>{{ scope.row.empCode }}</span>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="职位" min-width="100px" header-align="center" align="center">
  72. <template slot-scope="scope">
  73. <span>{{ scope.row.position }}</span>
  74. </template>
  75. </el-table-column>
  76. <el-table-column label="电话" min-width="130px" header-align="center" align="center">
  77. <template slot-scope="scope">
  78. <span>{{ scope.row.tel }}</span>
  79. </template>
  80. </el-table-column>
  81. <el-table-column label="账号数" sortable prop="isuser" min-width="90px" header-align="center" align="center">
  82. <template slot-scope="scope">
  83. <span>{{ scope.row.isuser }}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="操作" header-align="center" align="center" width="260" class-name="small-padding fixed-width" fixed="right">
  87. <template slot-scope="{row}">
  88. <el-button v-if="isEmpUpdate" type="primary" size="mini" @click="form_edit(row)">编辑</el-button>
  89. <el-button v-if="row.status!='已删' && isEmpDel" size="mini" type="danger" @click="form_delete(row)">删除</el-button>
  90. </template>
  91. </el-table-column>
  92. </el-table>
  93. <pagination
  94. v-show="total>0"
  95. :total="total"
  96. :page.sync="getdataListParm.offset"
  97. :limit.sync="getdataListParm.pagecount"
  98. @pagination="getList"
  99. />
  100. <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
  101. <el-form
  102. ref="dataForm"
  103. v-enterToNext="true"
  104. :rules="rules"
  105. :model="dataform"
  106. label-position="left"
  107. label-width="100px"
  108. style="width: 600px; margin-left:50px;"
  109. >
  110. <el-form-item label="用户名" prop="empname">
  111. <el-input ref="empname" v-model="dataform.empname" />
  112. </el-form-item>
  113. <el-form-item label="EAS账户名" prop="easName">
  114. <el-input ref="easName" v-model="dataform.easName" />
  115. </el-form-item>
  116. <el-form-item label="部门" prop="deptid">
  117. <tree-select
  118. :disabled="disabled"
  119. :height="280"
  120. :width="200"
  121. size="small"
  122. :data="parentDept"
  123. :default-props="defaultProps"
  124. :node-key="nodeKey"
  125. :checked-keys="defaultCheckedKeys"
  126. @popoverHide="popoverHide"
  127. />
  128. </el-form-item>
  129. <el-form-item label="职位" prop="position">
  130. <el-input ref="position" v-model="dataform.position" />
  131. </el-form-item>
  132. <el-form-item label="工号" prop="empCode">
  133. <el-input ref="empCode" v-model="dataform.empCode" />
  134. </el-form-item>
  135. <el-form-item label="联系方式" prop="tel">
  136. <el-input ref="tel" v-model="dataform.tel" />
  137. </el-form-item>
  138. <el-form-item label="备注" prop="remark">
  139. <el-input ref="remark" v-model="dataform.remark" />
  140. </el-form-item>
  141. <el-form-item label="顺序" prop="sort">
  142. <el-input
  143. ref="sort"
  144. v-model="dataform.sort"
  145. />
  146. </el-form-item>
  147. <!-- <el-form-item label="启用" prop="enable">
  148. <el-switch
  149. ref="enable"
  150. v-model="dataform.enable"
  151. active-color="#13ce66"
  152. inactive-color="#ff4949"
  153. :active-value="1"
  154. :inactive-value="0"
  155. />
  156. </el-form-item> -->
  157. </el-form>
  158. <div slot="footer" class="dialog-footer">
  159. <el-button v-if="dialogStatus==='create'" ref="createb" type="success" @click="add_dialog_save_again()">确认新增</el-button>
  160. <el-button type="primary" @click="dialogStatus==='create'?add_dialog_save():edit_dialog_save()">确认</el-button>
  161. <el-button @click="dialogFormVisible = false;getList()">关闭</el-button>
  162. </div>
  163. </el-dialog>
  164. </div>
  165. </div>
  166. </template>
  167. <script>
  168. import TreeSelect from '@/components/TreeSelect'
  169. import waves from '@/directive/waves' // waves directive
  170. // eslint-disable-next-line no-unused-vars
  171. import { isIntegerZero } from '@/utils/validate'
  172. import { validatePhoneTwo } from '@/utils/validate'
  173. import enterToNext from '@/directive/enterToNext' // enterToNext directive
  174. import { PostDataByName, GetDataByName, getRecuData, GetDataByNames, checkButtons, failproccess,GetAccount } from '@/api/common'
  175. import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  176. import { MessageBox } from 'element-ui'
  177. import Cookies from 'js-cookie'
  178. import { sortChange, json2excel } from '@/utils/index.js'
  179. export default {
  180. name: 'Emp',
  181. components: { Pagination, TreeSelect },
  182. directives: { waves, enterToNext },
  183. data() {
  184. return {
  185. isEmpAdd: [],
  186. isEmpUpdate: [],
  187. isEmpDel: [],
  188. disabled: false,
  189. tableKey: 0,
  190. list: [{ sqlname: '', id: 0, sqlstr: '' }],
  191. parentDept: [],
  192. total: 0,
  193. listLoading: true,
  194. requestParam: {
  195. name: 'createapisql',
  196. offset: 0,
  197. pagecount: 0,
  198. parammaps: []
  199. },
  200. dataform: {
  201. position: '',
  202. empname: '',
  203. deptname: '',
  204. deptid: '',
  205. tel: '',
  206. remark: '',
  207. id: '',
  208. sort: '',
  209. parentid: '',
  210. enable: '1',
  211. empCode: '',
  212. easName: ''
  213. },
  214. getDeptParm: { name: 'getdeptrecu', idname: 'value', params: [Cookies.get('pastureid')] },
  215. getdataListParm: {
  216. name: 'getEmpAllL',
  217. page: 1,
  218. offset: 1,
  219. pagecount: 10,
  220. returntype: 'Map',
  221. parammaps: {
  222. empname: '',
  223. empCode: '',
  224. pastureId: Cookies.get('pastureid'),
  225. pastureName: Cookies.get('pasturename')
  226. }
  227. },
  228. getdataListParmSH: {
  229. name: 'getEmpAllL',
  230. page: 0,
  231. offset: 0,
  232. pagecount: 0,
  233. returntype: 'Map',
  234. parammaps: {
  235. empname: '',
  236. empCode: '',
  237. pastureId: Cookies.get('pastureid'),
  238. pastureName: Cookies.get('pasturename')
  239. }
  240. },
  241. rules: {
  242. empname: [{ type: 'string', required: true, message: '必填', trigger: 'change' }],
  243. empCode: [{ type: 'string', required: true, message: '必填', trigger: 'blur' }],
  244. tel: [
  245. {
  246. type: 'number',
  247. required: true,
  248. message: '请输入正确的格式',
  249. trigger: 'change'
  250. }
  251. ],
  252. sort: [{ validator: isIntegerZero, trigger: 'blur' }],
  253. // eslint-disable-next-line no-dupe-keys
  254. tel: [{ validator: validatePhoneTwo, trigger: 'blur' }]
  255. },
  256. // 2-3:下拉框请求后数据加入[]
  257. findAllPasture: [],
  258. // 2-1.请求下拉框接口
  259. requestParams: [
  260. { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}
  261. ],
  262. dialogFormVisible: false,
  263. selectedRole: '',
  264. dialogStatus: '',
  265. textMap: {
  266. update: '编辑',
  267. create: '新增'
  268. },
  269. rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
  270. cellStyle: { padding: 0 + 'px' },
  271. defaultProps: {
  272. children: 'children',
  273. label: 'label'
  274. },
  275. nodeKey: 'value',
  276. defaultCheckedKeys: [],
  277. pageNum: 0,
  278. pageSize: 10
  279. }
  280. },
  281. created() {
  282. this.getList()
  283. this.getButtons()
  284. },
  285. methods: {
  286. tableSort(column) {
  287. sortChange(column, this.list)
  288. },
  289. getButtons() {
  290. // 新增
  291. const EmpAdd = 'console:emp:add'
  292. const isEmpAdd = checkButtons(this.$store.state.user.buttons, EmpAdd)
  293. this.isEmpAdd = isEmpAdd
  294. // 编辑
  295. const EmpUpdate = 'console:emp:update'
  296. const isEmpUpdate = checkButtons(this.$store.state.user.buttons, EmpUpdate)
  297. this.isEmpUpdate = isEmpUpdate
  298. // 删除
  299. const EmpDel = 'console:emp:del'
  300. const isEmpDel = checkButtons(this.$store.state.user.buttons, EmpDel)
  301. this.isEmpDel = isEmpDel
  302. },
  303. popoverHide(checkedIds, checkedData) {
  304. console.log(checkedIds, checkedData)
  305. this.dataform.pastureId = checkedData.pastureId
  306. this.dataform.deptid = checkedIds
  307. this.dataform.parentid = checkedData.parentid
  308. },
  309. deptenter() {
  310. this.$nextTick(() => {
  311. this.$refs['remark'].focus()
  312. })
  313. },
  314. getList() {
  315. this.listLoading = true
  316. GetDataByName(this.getdataListParm).then(response => {
  317. this.list = response.data.list
  318. this.pageNum = response.data.pageNum
  319. this.pageSize = response.data.pageSize
  320. if (response.data.total) {
  321. this.total = response.data.total
  322. }
  323. this.getDownList()
  324. this.getDeptList()
  325. // Just to simulate the time of the request
  326. setTimeout(() => {
  327. this.listLoading = false
  328. }, 0.5 * 1000)
  329. })
  330. },
  331. // 2-2:下拉框
  332. getDownList() {
  333. GetDataByNames(this.requestParams).then(response => {
  334. this.findAllPasture = response.data.findAllPasture.list
  335. })
  336. },
  337. form_search() {
  338. this.listLoading = true
  339. this.getdataListParm.offset = 1
  340. this.getList()
  341. },
  342. getDeptList() {
  343. getRecuData(this.getDeptParm).then(response => {
  344. this.parentDept = response.data
  345. })
  346. },
  347. resetRequestParam() {
  348. this.dataform.easName = ''
  349. this.dataform.empname = ''
  350. this.dataform.deptname = ''
  351. this.dataform.parentid = ''
  352. this.dataform.deptid = ''
  353. this.dataform.position = ''
  354. this.dataform.tel = ''
  355. this.dataform.remark = ''
  356. this.dataform.empCode = ''
  357. this.dataform.id = ''
  358. this.dataform.sort = '0'
  359. this.dataform.enable = '1'
  360. this.defaultCheckedKeys = []
  361. },
  362. form_add() {
  363. this.resetRequestParam()
  364. this.dialogStatus = 'create'
  365. this.dialogFormVisible = true
  366. this.$nextTick(() => {
  367. this.$refs['dataForm'].clearValidate()
  368. })
  369. },
  370. add_dialog_save() {
  371. console.log(this.dataform)
  372. this.$refs['dataForm'].validate(valid => {
  373. if (valid) {
  374. if (this.dataform.deptid == '') {
  375. this.$message({ type: 'error', message: '部门必填', duration: 2000 })
  376. return false
  377. }
  378. this.requestParam.name = 'createEmp'
  379. this.requestParam.parammaps = {}
  380. if (this.dataform.easName == '') { this.dataform.easName = this.dataform.empname }
  381. this.requestParam.parammaps.easName = this.dataform.easName
  382. this.requestParam.parammaps.empname = this.dataform.empname
  383. this.requestParam.parammaps.deptid = this.dataform.deptid
  384. this.requestParam.parammaps.tel = this.dataform.tel
  385. this.requestParam.parammaps.position = this.dataform.position
  386. this.requestParam.parammaps.remark = this.dataform.remark
  387. this.requestParam.parammaps.sort = this.dataform.sort
  388. this.requestParam.parammaps.enable = this.dataform.enable
  389. this.requestParam.parammaps.pastureId = this.dataform.pastureId
  390. this.requestParam.parammaps.empCode = this.dataform.empCode
  391. PostDataByName(this.requestParam).then(response => {
  392. if (response.msg !== 'fail') {
  393. this.getList()
  394. this.dialogFormVisible = false
  395. this.$notify({ title: '成功', message: '新增成功', type: 'success', duration: 2000 })
  396. } else {
  397. var Duplicate = new RegExp('Duplicate')
  398. if (Duplicate.test(response.data)) {
  399. this.$notify({ title: '', message: '此员工已存在', type: 'warning', duration: 2000 })
  400. } else {
  401. failproccess(response, this.$notify)
  402. }
  403. }
  404. })
  405. }
  406. })
  407. },
  408. add_dialog_save_again() {
  409. this.$refs['dataForm'].validate(valid => {
  410. if (valid) {
  411. if (this.dataform.deptid == '') {
  412. this.$message({ type: 'error', message: '部门必填', duration: 2000 })
  413. return false
  414. }
  415. this.requestParam.name = 'createEmp'
  416. this.requestParam.parammaps = {}
  417. if (this.dataform.easName == '') { this.dataform.easName = this.dataform.empname }
  418. this.requestParam.parammaps.easName = this.dataform.easName
  419. this.requestParam.parammaps.empname = this.dataform.empname
  420. this.requestParam.parammaps.deptid = this.dataform.deptid
  421. this.requestParam.parammaps.tel = this.dataform.tel
  422. this.requestParam.parammaps.position = this.dataform.position
  423. this.requestParam.parammaps.remark = this.dataform.remark
  424. this.requestParam.parammaps.sort = this.dataform.sort
  425. this.requestParam.parammaps.enable = this.dataform.enable
  426. this.requestParam.parammaps.pastureId = this.dataform.pastureId
  427. this.requestParam.parammaps.empCode = this.dataform.empCode
  428. PostDataByName(this.requestParam).then(response => {
  429. if (response.msg !== 'fail') {
  430. this.getList()
  431. this.resetRequestParam()
  432. this.$notify({ title: '成功', message: '新增成功', type: 'success', duration: 2000 })
  433. } else {
  434. var Duplicate = new RegExp('Duplicate')
  435. if (Duplicate.test(response.data)) {
  436. this.$notify({ title: '', message: '此员工已存在', type: 'warning', duration: 2000 })
  437. } else {
  438. failproccess(response, this.$notify)
  439. }
  440. }
  441. })
  442. }
  443. })
  444. },
  445. form_edit(row) {
  446. console.log(row)
  447. this.dataform = Object.assign(row, {})
  448. this.defaultCheckedKeys = [this.dataform.deptid]
  449. this.dialogStatus = 'update'
  450. this.dialogFormVisible = true
  451. this.$nextTick(() => {
  452. this.$refs['dataForm'].clearValidate()
  453. })
  454. },
  455. edit_dialog_save() {
  456. this.$refs['dataForm'].validate(valid => {
  457. if (valid) {
  458. this.requestParam.name = 'updateEmp'
  459. this.requestParam.parammaps = {}
  460. if (this.dataform.easName == '' || this.dataform.easName == undefined) { this.dataform.easName = this.dataform.empname }
  461. this.requestParam.parammaps.easName = this.dataform.easName
  462. this.requestParam.parammaps.empname = this.dataform.empname
  463. this.requestParam.parammaps.deptid = this.dataform.deptid
  464. this.requestParam.parammaps.tel = this.dataform.tel
  465. this.requestParam.parammaps.position = this.dataform.position
  466. this.requestParam.parammaps.remark = this.dataform.remark
  467. this.requestParam.parammaps.sort = this.dataform.sort
  468. this.requestParam.parammaps.enable = this.dataform.enable
  469. this.requestParam.parammaps.pastureId = this.dataform.pastureId
  470. this.requestParam.parammaps.empCode = this.dataform.empCode
  471. this.requestParam.parammaps.id = this.dataform.id
  472. PostDataByName(this.requestParam).then(() => {
  473. this.getList()
  474. this.resetRequestParam()
  475. this.dialogFormVisible = false
  476. })
  477. }
  478. })
  479. },
  480. handleDownload() {
  481. this.$alert('员工信息正在导出中,请勿刷新或离开本页面,若导出时间过长,建议缩小导出数据范围重新导出', {})
  482. this.isPercentage = true
  483. this.percentage = 1
  484. var timer = setInterval(() => {
  485. this.percentage += 5
  486. if (this.percentage > 95) {
  487. this.percentage = 99
  488. clearInterval(timer)
  489. }
  490. this.percentage = this.percentage
  491. }, 1000)
  492. this.getdataListParmSH.parammaps = this.getdataListParm.parammaps
  493. // GetDataByName(this.getdataListParm)
  494. GetAccount(this.getdataListParmSH).then(response => {
  495. this.downLoadList = response.data.list
  496. if (response.data.list !== '') {
  497. this.percentage = 99
  498. setTimeout(() => {
  499. this.isPercentage = false
  500. }, 2000)
  501. }
  502. console.log(this.downLoadList)
  503. const elecExcelDatas = [
  504. {
  505. tHeader: ['牧场', '姓名', '部门', '职位', '工号'],
  506. filterVal: ['pastureName', 'empname', 'deptname', 'position', 'empCode'],
  507. tableDatas: this.downLoadList,
  508. sheetName: '员工信息'
  509. }
  510. ]
  511. json2excel(elecExcelDatas, '员工信息', true, 'xlsx')
  512. })
  513. },
  514. form_delete(row) {
  515. MessageBox.confirm('名称:' + row.empname, '确认删除?', {
  516. confirmButtonText: '确认',
  517. cancelButtonText: '取消',
  518. type: 'warning'
  519. }).then(() => {
  520. this.requestParam.name = 'deleteEmp'
  521. this.requestParam.parammaps = {}
  522. this.requestParam.parammaps.id = row.id
  523. // this.requestParam.params[1] = this.$store.state.user.pastureid
  524. PostDataByName(this.requestParam).then(response => {
  525. if (response.msg !== 'fail') {
  526. this.getList()
  527. this.resetRequestParam()
  528. this.dialogFormVisible = false
  529. this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
  530. } else {
  531. this.$notify({ title: '失败', message: '删除失败-' + response.data, type: 'danger', duration: 2000 })
  532. }
  533. })
  534. })
  535. }
  536. }
  537. }
  538. </script>