pigsty.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <div class="bpighouse">
  3. <el-container>
  4. <el-header>
  5. <div class="rect rect-form">
  6. <el-form
  7. :inline="true"
  8. :model="dataForm"
  9. size="mini">
  10. <el-form-item style="width: 180px">
  11. <el-input
  12. v-model="dataForm.key"
  13. placeholder="猪舍名"
  14. clearable>
  15. </el-input>
  16. </el-form-item>
  17. <el-form-item style="width: 140px">
  18. <el-select v-model="dataForm.feederId" placeholder="养殖员" style="width: 100%">
  19. <el-option
  20. v-for="item in employeeList"
  21. :key="item.id"
  22. :label="item.name"
  23. :value="item.id">
  24. </el-option>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item>
  28. <el-button icon="el-icon-search" @click="getDataList()">查 询</el-button>
  29. </el-form-item>
  30. <el-form-item>
  31. <el-button icon="el-icon-circle-close" @click="clearAll()">清 空</el-button>
  32. </el-form-item>
  33. </el-form>
  34. </div>
  35. </el-header>
  36. <el-main>
  37. <div class="rect rect-table">
  38. <!-- 新增 删除按钮 -->
  39. <el-form inline size="mini">
  40. <el-form-item>
  41. <el-button
  42. icon="el-icon-plus"
  43. @click="addOrUpdateHandle()">
  44. 新 增
  45. </el-button>
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button
  49. icon="el-icon-delete"
  50. type="danger"
  51. @click="deleteHandle()"
  52. :disabled="selectionDataList.length <= 0">
  53. 删 除
  54. </el-button>
  55. </el-form-item>
  56. </el-form>
  57. <el-table
  58. height="540"
  59. :data="dataList"
  60. @selection-change="selectionChangeHandle"
  61. v-loading="dataListLoading"
  62. style="width: 100%"
  63. size="mini"
  64. border
  65. stripe
  66. :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}"
  67. :cell-style="{color: '#888',fontSize: '13px'}">
  68. <el-table-column
  69. type="selection"
  70. header-align="center"
  71. align="center"
  72. width="50">
  73. </el-table-column>
  74. <el-table-column
  75. prop="number"
  76. header-align="center"
  77. align="center"
  78. label="猪舍名">
  79. </el-table-column>
  80. <el-table-column
  81. prop="feederName"
  82. header-align="center"
  83. align="center"
  84. label="养殖员">
  85. </el-table-column>
  86. <el-table-column
  87. header-align="center"
  88. align="center"
  89. label="操作">
  90. <template slot-scope="scope">
  91. <el-button
  92. type="text"
  93. size="small"
  94. @click="addOrUpdateHandle(scope.row)">
  95. 修改
  96. </el-button>
  97. <el-button
  98. type="text"
  99. size="small"
  100. @click="deleteHandle(scope.row)">
  101. 删除
  102. </el-button>
  103. </template>
  104. </el-table-column>
  105. </el-table>
  106. <div class="block">
  107. <el-pagination
  108. @size-change="sizeChangeHandle"
  109. @current-change="currentChangeHandle"
  110. :current-page="pageIndex"
  111. :page-sizes="[10, 20, 30, 50, 100]"
  112. :page-size="pageSize"
  113. layout="total, sizes, prev, pager, next, jumper"
  114. :total="totalPage">
  115. </el-pagination>
  116. </div>
  117. <el-dialog
  118. :title="!form.id ? '新增' : '修改'"
  119. :close-on-click-modal="false"
  120. :visible.sync="visible"
  121. @close="cancel"
  122. width="600px">
  123. <el-form
  124. :rules="dataRule"
  125. :model="form"
  126. ref="form"
  127. @keyup.enter.native="formSubmit()"
  128. label-width="80px"
  129. size="mini"
  130. style="margin-left: 20px;width: 500px">
  131. <el-form-item label="猪舍名" prop="number">
  132. <el-input v-model="form.number" placeholder="猪舍名"></el-input>
  133. </el-form-item>
  134. <el-form-item label="养殖员" prop="feederId">
  135. <el-select v-model="form.feederId" placeholder="请选择养殖员" style="width: 100%">
  136. <el-option
  137. v-for="item in employeeList"
  138. :key="item.id"
  139. :label="item.name"
  140. :value="item.id">
  141. </el-option>
  142. </el-select>
  143. </el-form-item>
  144. </el-form>
  145. <span slot="footer" class="dialog-footer">
  146. <el-button size="mini" @click="cancel">关闭</el-button>
  147. <el-button size="mini" type="primary" @click="formSubmit()">确定</el-button>
  148. </span>
  149. </el-dialog>
  150. </div>
  151. </el-main>
  152. </el-container>
  153. </div>
  154. </template>
  155. <script>
  156. export default {
  157. data() {
  158. return {
  159. dataForm: {
  160. key: "",
  161. feederId: ''
  162. },
  163. dataList: [
  164. {
  165. buildTime: "",
  166. id: "",
  167. location: "",
  168. manager: "",
  169. name: "",
  170. },
  171. ],
  172. pageIndex: 1,
  173. pageSize: 10,
  174. totalPage: 0,
  175. dataListLoading: false,
  176. selectionDataList: [],
  177. visible: false,
  178. form: {
  179. id: "",
  180. number: "",
  181. // farmId: "",
  182. feederId: "",
  183. },
  184. // farmList: [], // 牧场list
  185. employeeList: [], // 养殖员list
  186. // TODO: 猪舍编号长度
  187. dataRule: {
  188. // farmId: [
  189. // { required: true, message: '所属牧场不能为空', trigger: ['blur', 'change'] }
  190. // ],
  191. number: [
  192. { required: true, message: '猪舍名不能为空', trigger: 'blur' }
  193. ],
  194. feederId: [
  195. { required: true, message: '养殖员不能为空', trigger: 'blur' }
  196. ]
  197. }
  198. }
  199. },
  200. mounted() {
  201. this.getDataList();
  202. },
  203. methods: {
  204. // 获取数据列表
  205. getDataList() {
  206. this.dataListLoading = true;
  207. this.$http({
  208. url: this.$http.adornUrl("/management/pigsty/list"),
  209. method: "get",
  210. params: this.$http.adornParams({
  211. page: this.pageIndex,
  212. limit: this.pageSize,
  213. keyword: this.dataForm.key || undefined,
  214. feederId: this.dataForm.feederId || undefined
  215. })
  216. }).then(async ({ data }) => {
  217. // 获取所有养殖员
  218. let employeeResult = await this.$http({
  219. url: this.$http.adornUrl("/management/employee/findAll"),
  220. method: "get",
  221. params: this.$http.adornParams({})
  222. });
  223. employeeResult.data.all && (this.employeeList = employeeResult.data.all)
  224. if (data && data.code === 0) {
  225. this.dataList = data.page.list
  226. this.totalPage = data.page.totalCount
  227. } else {
  228. this.dataList = []
  229. this.totalPage = 0
  230. }
  231. this.dataListLoading = false
  232. })
  233. },
  234. // 清空查询内容
  235. clearAll () {
  236. this.dataForm.key = ''
  237. this.dataForm.feederId = ''
  238. },
  239. // 每页数
  240. sizeChangeHandle(val) {
  241. this.pageSize = val;
  242. this.pageIndex = 1;
  243. this.getDataList();
  244. },
  245. // 当前页
  246. currentChangeHandle(val) {
  247. this.pageIndex = val;
  248. this.getDataList();
  249. },
  250. // 新增 or 修改
  251. addOrUpdateHandle(row) {
  252. // 显示猪舍新增 or 修改面板
  253. this.visible = true;
  254. if (row) {
  255. this.form.id = row.id
  256. for (let key of Object.keys(this.form)) {
  257. this.form[key] = row[key]
  258. }
  259. }
  260. console.log(row);
  261. console.log(this.form);
  262. // 新增时获取养殖员
  263. this.$http({
  264. url: this.$http.adornUrl("/management/employee/findAll"),
  265. method: "get",
  266. params: this.$http.adornParams({})
  267. }).then(async ({ data }) => {
  268. if (data && data.code === 0) {
  269. this.employeeList = data.all
  270. } else {
  271. this.$message.error(data.msg)
  272. }
  273. })
  274. },
  275. // 选择n个牧场
  276. selectionChangeHandle(val) {
  277. this.selectionDataList = val
  278. // val.forEach((item) => {
  279. // this.selectionDataList.push(item.id);
  280. // });
  281. },
  282. // 删除n个牧场
  283. deleteHandle(pigsty) {
  284. let ids = pigsty? [pigsty.id]: this.selectionDataList.map(item => item.id)
  285. let names = pigsty? [pigsty.number]: this.selectionDataList.map(item => item.number)
  286. console.log(this.selectionDataList);
  287. this.$confirm(`确定${pigsty ? '删除' : '批量删除'}${names.join()}猪舍?`, "提示", {
  288. confirmButtonText: "确定",
  289. cancelButtonText: "取消",
  290. type: "warning",
  291. }).then(() => {
  292. // 删除操作
  293. if (this.selectionDataList.length <= 0) {
  294. return;
  295. }
  296. this.$http({
  297. url: this.$http.adornUrl("/management/pigsty/delete"),
  298. method: "post",
  299. data: this.$http.adornData(ids, false),
  300. }).then((result) => {
  301. console.log(result);
  302. if (result.data.code === 0) {
  303. this.$message({
  304. message: "成功删除猪舍",
  305. type: "success",
  306. duration: 1000,
  307. })
  308. // pageIndex修正
  309. this.totalPage -= this.selectionDataList.length
  310. let pages = Math.ceil(this.totalPage / this.pageSize)
  311. this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
  312. this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
  313. } else {
  314. // this.$message.error('删除失败:' + result.data.msg)
  315. this.$confirm(result.data.msg, '删除失败', {
  316. confirmButtonText: '确定',
  317. cancelButtonText: '取消',
  318. type: 'warning'
  319. }).then(() => {
  320. console.log('猪舍编号输入不合法')
  321. }).catch(() => {})
  322. }
  323. this.resetForm();
  324. this.selectionDataList = [];
  325. });
  326. })
  327. .catch(() => {});
  328. },
  329. formSubmit() {
  330. this.$refs['form'].validate((valid) => {
  331. if (valid) {
  332. this.$http({
  333. url: this.$http.adornUrl(`/management/pigsty/${!this.form.id ? 'save' : 'update'}`),
  334. method: 'post',
  335. data: this.$http.adornData({
  336. 'id': this.form.id || undefined,
  337. 'pigstyId': this.form.pigstyId,
  338. 'feederId': this.form.feederId,
  339. 'farmId': parseInt(this.$cookie.get('formFarmId')),
  340. 'number': this.form.number
  341. }, false)
  342. }).then(({data}) => {
  343. if (data && data.code === 0) {
  344. this.visible = false
  345. this.getDataList()
  346. this.$message({
  347. message: '操作成功',
  348. type: 'success',
  349. duration: 1500
  350. })
  351. // this.resetForm()
  352. this.visible = false
  353. } else {
  354. this.$message.error(data.msg)
  355. }
  356. })
  357. }
  358. })
  359. },
  360. // 清空form
  361. resetForm() {
  362. for (let i in this.form) {
  363. this.form[i] = "";
  364. }
  365. this.getDataList();
  366. },
  367. // 取消
  368. cancel() {
  369. this.visible = false
  370. // 如果修改,则不保留form
  371. if (this.form.id) {
  372. this.resetForm()
  373. }
  374. },
  375. // 校验输入是否完整
  376. validComplete (val) {
  377. val && (delete this.form.id)
  378. for (let i in this.form) {
  379. if (!this.form[i].toString()) {
  380. return false
  381. }
  382. }
  383. return true
  384. },
  385. // 如不完整,则提示
  386. confirmComplete (val) {
  387. if (this.validComplete(val)) {
  388. return true
  389. }
  390. this.$confirm(`请输入完整`, '提示', {
  391. confirmButtonText: '确定',
  392. cancelButtonText: '取消',
  393. type: 'warning'
  394. }).then(() => {
  395. console.log('牧场输入不完整')
  396. }).catch(() => {})
  397. return false
  398. }
  399. }
  400. }
  401. </script>
  402. <style scoped>
  403. .rect {
  404. background-color: #fff;
  405. padding: 30px 15px;
  406. border-radius: 5px;
  407. border: 1px solid #e8e8e8;
  408. }
  409. .rect-form {
  410. padding-bottom: 10px;
  411. }
  412. .rect-table {
  413. margin-top: 20px;
  414. }
  415. .demo-table-expand {
  416. font-size: 0;
  417. margin-left: 40px;
  418. }
  419. .demo-table-expand label {
  420. width: 90px;
  421. color: #99a9bf;
  422. }
  423. .demo-table-expand .el-form-item {
  424. margin-right: 0;
  425. margin-bottom: 0;
  426. width: 80%;
  427. }
  428. .el-table .height {
  429. background: rgba(254, 254, 254, 0.5);
  430. }
  431. /deep/ .el-table--mini td, .el-table--mini th {
  432. padding: 3px 0 !important;
  433. height: 20px !important;
  434. }
  435. /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
  436. color: rgb(24,144,255);
  437. background-color: rgb(24,144,255);
  438. border-color: rgb(24,144,255);
  439. }
  440. /deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  441. background-color: rgb(24,144,255);
  442. border-color: rgb(24,144,255);
  443. }
  444. /deep/.el-table .el-checkbox__inner:hover {
  445. border-color: rgb(24,144,255);
  446. }
  447. /deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
  448. border-color: rgb(24,144,255);
  449. }
  450. /deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  451. background-color: rgb(24,144,255);
  452. border-color: rgb(24,144,255);
  453. }
  454. </style>