index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <template>
  2. <div class="app-container">
  3. <div class="search">
  4. <el-input v-model="table.parammaps.name" placeholder="请输入牧场名称" style="width: 180px;" class="filter-item" clearable />
  5. <el-input v-model="table.parammaps.manager_user" placeholder="请输入负责人姓名" style="width: 180px;" class="filter-item" clearable />
  6. <el-input v-model="table.parammaps.manager_phone" placeholder="请输入手机号" style="width: 180px;" class="filter-item" clearable />
  7. <el-date-picker v-model="table.parammaps.inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;margin-right: 10px;" />
  8. <el-select v-model="table.parammaps.is_show" placeholder="状态" class="filter-item" style="width: 120px;" clearable>
  9. <el-option v-for="item in enableList" :key="item.value" :label="item.label" :value="item.value" />
  10. </el-select>
  11. <el-button class="successBorder" @click="handleSearch">查询</el-button>
  12. <el-button class="successBorder" @click="handleRefresh">重置</el-button>
  13. </div>
  14. <div class="operation">
  15. <el-button v-if="isAdd" icon="el-icon-plus" class="success" @click="handleCreate">添加牧场</el-button>
  16. </div>
  17. <div class="table">
  18. <el-table
  19. :key="table.tableKey"
  20. v-loading="table.listLoading"
  21. element-loading-text="给我一点时间"
  22. :data="table.list"
  23. border
  24. fit
  25. highlight-current-row
  26. style="width: 100%;"
  27. :row-style="rowStyle"
  28. :cell-style="cellStyle"
  29. class="elTable table-fixed"
  30. >
  31. <el-table-column type="selection" align="center" width="50" />
  32. <el-table-column label="序号" min-width="130px" align="center" prop="id" />
  33. <el-table-column label="牧场名称" min-width="100px" align="center" prop="name" />
  34. <el-table-column label="登录账号" min-width="100px" align="center" prop="account" />
  35. <el-table-column label="负责人姓名" min-width="100px" align="center" prop="manager_user" />
  36. <el-table-column label="手机号" min-width="100px" align="center" prop="manager_phone" />
  37. <el-table-column label="牧场地址" min-width="100px" align="center" prop="address" />
  38. <el-table-column label="添加时间" min-width="100px" align="center" prop="created_at_format" />
  39. <el-table-column label="状态" min-width="110px" align="center">
  40. <template slot-scope="scope">
  41. <el-switch v-model="scope.row.is_show" :disabled="!isEnable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" @change="handleEnableChange(scope.$index, scope.row)" />
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
  45. <template slot-scope="{row}">
  46. <a v-if="isResetpassword" class="correcting" size="mini" style="width: 80px;" @click="handleResetPassword(row)">重置密码</a>
  47. <span v-if="isResetpassword && isEdit" class="centerSpan">|</span>
  48. <a v-if="isEdit" class="correcting" @click="handleUpdate(row)">编辑</a>
  49. <span v-if="isEdit && isDelete" class="centerSpan">|</span>
  50. <a v-if="isDelete" class="correcting" @click="handleRowDelete(row)">删除</a>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. <pagination v-show="table.total>=0" :total="table.total" :page.sync="table.page" :limit.sync="table.page_size" @pagination="getList" />
  55. </div>
  56. <!-- 新增/编辑 -->
  57. <el-dialog :title="textMap[edit.dialogStatus]" :visible.sync="edit.dialogFormVisible" :close-on-click-modal="false"
  58. width="50%">
  59. <div class="edit">
  60. <div class="content">
  61. <el-form ref="editTemp" :rules="rules" :model="edit.temp" label-position="right" label-width="115px" style="width: 90%;margin:0 auto 30px">
  62. <el-row>
  63. <el-col :span="12">
  64. <el-form-item label="牧场名称:" prop="name">
  65. <el-input ref="name" v-model="edit.temp.name" placeholder="请输入牧场名称" />
  66. </el-form-item>
  67. </el-col>
  68. </el-row>
  69. <el-row>
  70. <el-col :span="12">
  71. <el-form-item label="登录账号:" prop="account">
  72. <el-input ref="account" v-model="edit.temp.account" placeholder="请输入登录账号" />
  73. </el-form-item>
  74. </el-col>
  75. </el-row>
  76. <el-row>
  77. <el-col :span="12">
  78. <el-form-item label="初始密码" prop="username">
  79. <span>123456</span>
  80. </el-form-item>
  81. </el-col>
  82. </el-row>
  83. <el-row>
  84. <el-col :span="12">
  85. <el-form-item label="负责人姓名:" prop="manager_user">
  86. <el-input ref="manager_user" v-model="edit.temp.manager_user" placeholder="请输入负责人姓名" />
  87. </el-form-item>
  88. </el-col>
  89. </el-row>
  90. <el-row>
  91. <el-col :span="12">
  92. <el-form-item label="手机号:" prop="manager_phone">
  93. <el-input ref="manager_phone" v-model="edit.temp.manager_phone" placeholder="请输入手机号" />
  94. </el-form-item>
  95. </el-col>
  96. </el-row>
  97. <el-row>
  98. <el-col :span="12">
  99. <el-form-item label="牧场地址:" prop="address">
  100. <el-input ref="address" v-model="edit.temp.address" placeholder="请输入牧场地址" />
  101. </el-form-item>
  102. </el-col>
  103. </el-row>
  104. </el-form>
  105. </div>
  106. <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom: 40px;">
  107. <el-button class="cancelClose cancelClose" @click="edit.dialogFormVisible = false;getList(); ">关闭</el-button>
  108. <el-button class="save" :disabled="isokDisable"
  109. @click="edit.dialogStatus == 'add' ? createData():updateData()">确认</el-button>
  110. </div>
  111. </div>
  112. </el-dialog>
  113. </div>
  114. </template>
  115. <script>
  116. import { postJson,getJson,delJson,checkButtons } from '@/api/common'
  117. import Cookies from 'js-cookie'
  118. import { MessageBox } from 'element-ui'
  119. import { validatePhone } from '@/utils/validate'
  120. import Pagination from '@/components/Pagination'
  121. export default {
  122. name: 'PastureList',
  123. components: { Pagination },
  124. data() {
  125. return {
  126. enableList: JSON.parse(sessionStorage.downlist).is_show,
  127. table: {
  128. page: 1,
  129. page_size: parseInt(Cookies.get('pageCount')),
  130. tableKey: 0,
  131. list: [],
  132. total: 0,
  133. listLoading: true,
  134. parammaps: {
  135. name: '',manager_user:'',manager_phone:'',is_show:'',inputDatetime:[],end_time:'',start_time:''
  136. }
  137. },
  138. edit: {
  139. dialogStatus: '',
  140. dialogFormVisible: false,
  141. temp: {
  142. name:'',
  143. account:'',
  144. username:'',
  145. manager_user:'',
  146. manager_phone:'',
  147. address:''
  148. }
  149. },
  150. rules: {
  151. name: [{
  152. required: true,
  153. message: '必填',
  154. trigger: 'blur'
  155. }],
  156. account: [{
  157. required: true,
  158. message: '必填',
  159. trigger: 'blur'
  160. }],
  161. manager_user: [{
  162. required: true,
  163. message: '必填',
  164. trigger: 'blur'
  165. }],
  166. manager_phone: [{ validator: validatePhone,required: true, trigger: 'blur' }],
  167. address: [{
  168. required: true,
  169. message: '必填',
  170. trigger: 'blur'
  171. }],
  172. },
  173. create:{
  174. dialogStatus:'',
  175. dialogFormVisible: false,
  176. temp:{},
  177. rules:{}
  178. },
  179. isokDisable: false,
  180. textMap: {
  181. add: '添加牧场',
  182. update:'编辑牧场'
  183. },
  184. isAdd:'',isEdit:'',isResetpassword:'',isDelete:'',isEnable:'',
  185. rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
  186. cellStyle: { padding: 0 + 'px' }
  187. }
  188. },
  189. created() {
  190. this.getButton()
  191. this.getList()
  192. },
  193. methods: {
  194. getButton(){
  195. const add = 'rangeManagement:pastureList:add'
  196. this.isAdd = checkButtons(add)
  197. const edit = 'rangeManagement:pastureList:edit'
  198. this.isEdit = checkButtons(edit)
  199. const resetpassword = 'rangeManagement:pastureList:resetpassword'
  200. this.isResetpassword = checkButtons(resetpassword)
  201. const del = 'rangeManagement:pastureList:delete'
  202. this.isDelete = checkButtons(del)
  203. const enable = 'rangeManagement:pastureList:enable'
  204. this.isEnable = checkButtons(enable)
  205. },
  206. getList(){
  207. this.table.listLoading = true
  208. let page = this.table.page
  209. let page_size = this.table.page_size
  210. let url = 'api/v1/ops/pasture/list' + '?page=' + page + '&page_size=' + page_size
  211. let data = {
  212. "name":this.table.parammaps.name,
  213. "manager_user":this.table.parammaps.manager_user,
  214. "manager_phone":this.table.parammaps.manager_phone
  215. }
  216. if(this.table.parammaps.is_show !== ''){
  217. data.is_show = this.table.parammaps.is_show
  218. }
  219. if(this.table.parammaps.inputDatetime !== null && this.table.parammaps.inputDatetime.length > 0){
  220. data.created_start_time = this.table.parammaps.inputDatetime[0].getTime() / 1000
  221. data.created_end_time = this.table.parammaps.inputDatetime[1].getTime() / 1000 + 86400
  222. }
  223. postJson(url, data).then(response => {
  224. if (response.code == 200) {
  225. this.table.list = response.data.list
  226. this.table.total = response.data.total
  227. this.table.pageNum = response.data.page
  228. this.table.pageSize = response.data.page_size
  229. } else {
  230. this.table.list = []
  231. }
  232. setTimeout(() => {
  233. this.table.listLoading = false
  234. }, 1000)
  235. })
  236. },
  237. handleSearch() {
  238. this.table.page = 1
  239. this.getList()
  240. },
  241. handleRefresh() {
  242. this.table.parammaps.name = ''
  243. this.table.parammaps.manager_user = ''
  244. this.table.parammaps.manager_phone = ''
  245. this.table.parammaps.is_show = ''
  246. this.table.parammaps.inputDatetime = []
  247. this.table.parammaps.created_start_time = ''
  248. this.table.parammaps.created_end_time = ''
  249. this.table.page = 1
  250. this.getList()
  251. },
  252. handleEnableChange(index, row) {
  253. let url = 'api/v1/ops/pasture/is_show'
  254. let data = {
  255. "user_id":row.id,
  256. "is_show":row.is_show
  257. }
  258. postJson(url,data).then(response => {
  259. if(response.code == 200){
  260. this.$notify({ title: '成功', message: '成功', type: 'success', duration: 2000 })
  261. this.getList()
  262. }
  263. })
  264. },
  265. handleCreate(){
  266. this.edit.dialogStatus = 'add'
  267. this.edit.dialogFormVisible = true
  268. this.edit.temp= {
  269. name:'',
  270. account:'',
  271. username:'',
  272. manager_user:'',
  273. manager_phone:'',
  274. address:''
  275. }
  276. },
  277. createData(){
  278. this.$refs['editTemp'].validate((valid) => {
  279. if (valid) {
  280. this.isokDisable = true
  281. setTimeout(() => {
  282. this.isokDisable = false
  283. }, 1000)
  284. let url = 'api/v1/ops/pasture/add'
  285. let data = {
  286. 'name': this.edit.temp.name,
  287. "account": this.edit.temp.account,
  288. "manager_user": this.edit.temp.manager_user,
  289. "manager_phone": this.edit.temp.manager_phone,
  290. "address": this.edit.temp.address,
  291. "is_show": this.edit.temp.is_show,
  292. // "create_user": Cookies.get('username')
  293. }
  294. console.log(data)
  295. postJson(url, data).then(response => {
  296. if (response.code == 200) {
  297. this.$notify({
  298. title: '',
  299. message: '成功',
  300. type: 'success',
  301. duration: 2000
  302. })
  303. this.edit.dialogFormVisible = false
  304. this.getList()
  305. }
  306. })
  307. }
  308. })
  309. },
  310. handleUpdate(row) {
  311. console.log('点击了编辑')
  312. this.edit.dialogStatus = 'update'
  313. this.edit.dialogFormVisible = true
  314. this.edit.temp = Object.assign({},row)
  315. },
  316. updateData() {
  317. this.$refs['editTemp'].validate((valid) => {
  318. if (valid) {
  319. this.isokDisable = true
  320. setTimeout(() => {
  321. this.isokDisable = false
  322. }, 1000)
  323. let url = 'api/v1/ops/pasture/edit'
  324. let data = {
  325. "id":this.edit.temp.id,
  326. 'name': this.edit.temp.name,
  327. "manager_user": this.edit.temp.manager_user,
  328. "address": this.edit.temp.address,
  329. "manager_phone": this.edit.temp.manager_phone,
  330. "account": this.edit.temp.account
  331. }
  332. postJson(url, data).then(response => {
  333. if (response.code == 200) {
  334. this.$notify({
  335. title: '',
  336. message: '成功',
  337. type: 'success',
  338. duration: 2000
  339. })
  340. this.edit.dialogFormVisible = false
  341. this.getList()
  342. }
  343. })
  344. }
  345. })
  346. },
  347. handleRowDelete(row){
  348. MessageBox.confirm('确定删除吗?', {
  349. confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
  350. }).then(() => {
  351. let url = 'api/v1/ops/pasture/'
  352. // let data = 10011
  353. let data = row.id
  354. delJson(url, data).then(response => {
  355. if (response.code == 200) {
  356. this.$notify({
  357. title: '',
  358. message: '成功',
  359. type: 'success',
  360. duration: 2000
  361. })
  362. this.getList()
  363. }
  364. })
  365. })
  366. },
  367. handleResetPassword(row) {
  368. MessageBox.confirm('是否确认将此牧场密码重置为默认密码123456?', {
  369. confirmButtonText: '确认',
  370. cancelButtonText: '取消',
  371. type: 'warning'
  372. }).then(() => {
  373. let url = 'api/v1/ops/pasture/rest_password/' + row.id
  374. let data = {}
  375. postJson(url, data).then(response => {
  376. if (response.code == 200) {
  377. this.$notify({
  378. title: '',
  379. message: '成功',
  380. type: 'success',
  381. duration: 2000
  382. })
  383. this.getList()
  384. }
  385. })
  386. })
  387. },
  388. }
  389. }
  390. </script>
  391. <style lang="scss" scoped>
  392. .search{margin-top:10px;}
  393. $width:350px;
  394. $left:325px;
  395. .selectInput{
  396. position: relative;
  397. display: inline-block;
  398. .Input{width: $width;position: relative;}
  399. .el-icon-arrow-down{width: 30px;height: 30px;position: absolute;left: $left;top:10px;color:#C0C4CC;}
  400. .el-icon-arrow-up{width: 30px;height: 30px;position: absolute;left: $left;top:10px;color:#C0C4CC;}
  401. .selectUl{
  402. z-index: 111;width: $width;background: #fff;border: 1px solid #E4E7ED;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin: -1px 0 0 0;padding: 6px 0; margin: 0;box-sizing: border-box;position: absolute;
  403. li{
  404. list-style: none;font-size: 14px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #606266; height: 50px; line-height: 50px; box-sizing: border-box; cursor: pointer;
  405. a{float:left;width: 80px;}
  406. a:hover{color: rgba(0, 204, 102, 0.71); font-weight: 700;}
  407. }
  408. }
  409. }
  410. </style>