Rap 原分销系统代码Web
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

390 рядки
11KB

  1. <template>
  2. <div class="app-container">
  3. <div style="margin-bottom:10px">
  4. <el-button type="success" @click="addBtn">新增</el-button>
  5. <el-button type="success" @click="importBtn">导入</el-button>
  6. <el-button type="success" @click="exportTempBtn">模版下载</el-button>
  7. </div>
  8. <!--搜索-->
  9. <el-form class="mt_15" ref="form" inline size="small">
  10. <el-form-item label="机器人账号">
  11. <el-input v-model.trim="searchParm.accountName" clearable placeholder='机器人账号'></el-input>
  12. </el-form-item>
  13. <el-form-item label="uuid">
  14. <el-input v-model.trim="searchParm.robotClientUuid" clearable placeholder='uuid'></el-input>
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" @click="goSearch">搜索</el-button>
  18. <el-button type="warning" @click="resetForm">重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21. <!--表格渲染-->
  22. <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
  23. <el-table-column label="序号" type="index" width="50" />
  24. <el-table-column label="机器人账号" prop="accountName" />
  25. <el-table-column label="uuid信息" prop="robotClientUuid" />
  26. <el-table-column label="状态" prop="status">
  27. <template slot-scope="scope">
  28. {{ scope.row.status | getStatus}}
  29. </template>
  30. </el-table-column>
  31. <el-table-column label="创建时间" prop="createdAt" />
  32. <el-table-column label="修改时间" prop="updatedAt" />
  33. <el-table-column label="操作" width="300">
  34. <template slot-scope="scope">
  35. <el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
  36. <el-button type="warning" @click="editById(scope.row)">修改</el-button>
  37. <el-button type="danger" @click="updateStatus(scope.row)">重置</el-button>
  38. <el-button type="danger" @click="delById(scope.row.id)">删除</el-button>
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42. <!--分页-->
  43. <div class="mt_15">
  44. <el-pagination
  45. @size-change="handleSizeChange"
  46. @current-change="handleCurrentChange"
  47. :current-page="searchParm.page"
  48. :page-sizes="[10, 20, 30, 40, 50]"
  49. :page-size="searchParm.pageSize"
  50. layout="total, sizes, prev, pager, next, jumper"
  51. :total="total">
  52. </el-pagination>
  53. </div>
  54. <!--新增弹窗-->
  55. <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  56. <div class="dialog-content">
  57. <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="130px">
  58. <el-form-item label="机器人账号" prop="accountName">
  59. <el-input v-model.trim="addParm.accountName" clearable></el-input>
  60. </el-form-item>
  61. <el-form-item label="uuid信息" prop="robotClientUuid">
  62. <el-input v-model.trim="addParm.robotClientUuid" clearable></el-input>
  63. </el-form-item>
  64. </el-form>
  65. </div>
  66. <span slot="footer">
  67. <el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
  68. <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  69. </span>
  70. </el-dialog>
  71. <!--修改弹窗-->
  72. <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  73. <div class="dialog-content">
  74. <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="130px">
  75. <el-form-item label="机器人账号" prop="accountName">
  76. <el-input v-model.trim="editParm.accountName" clearable></el-input>
  77. </el-form-item>
  78. <el-form-item label="uuid信息" prop="robotClientUuid">
  79. <el-input v-model.trim="editParm.robotClientUuid" clearable></el-input>
  80. </el-form-item>
  81. </el-form>
  82. </div>
  83. <span slot="footer">
  84. <el-button type="info" @click="sureExitCancle('editParm')">取消</el-button>
  85. <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
  86. </span>
  87. </el-dialog>
  88. <!--详情弹窗-->
  89. <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  90. <div class="dialog-content">
  91. <el-form ref="form" size="small" label-width="130px">
  92. <el-form-item label="机器人账号" prop="accountName">
  93. <el-input v-model.trim="detailParm.accountName" :disabled="true"></el-input>
  94. </el-form-item>
  95. <el-form-item label="uuid信息" prop="robotClientUuid">
  96. <el-input v-model.trim="detailParm.robotClientUuid" :disabled="true"></el-input>
  97. </el-form-item>
  98. </el-form>
  99. </div>
  100. </el-dialog>
  101. <!--机器人信息导入 importBtn-->
  102. <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="23%">
  103. <div class="dialog-content">
  104. <el-upload
  105. class="upload-demo"
  106. drag
  107. ref="upload"
  108. :action="uploadFileUrl"
  109. :headers="uploadHeaders"
  110. :show-file-list = "false"
  111. :on-success="uploadSuccess"
  112. :before-upload="beforeAvatarUpload"
  113. multiple>
  114. <i class="el-icon-upload"></i>
  115. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  116. <div class="el-upload__tip" slot="tip">只能上传xlsl文件,且不超过10M</div>
  117. </el-upload>
  118. </div>
  119. </el-dialog>
  120. </div>
  121. </template>
  122. <script>
  123. import { getList, add, delById, getById, editById, updateStatus} from '@/api/group/rebot'
  124. export default {
  125. filters: {
  126. getStatus: function (value) {
  127. if(value == 0) {
  128. return '未占用';
  129. } else {
  130. return '已占用';
  131. }
  132. }
  133. },
  134. // 数据
  135. data() {
  136. return {
  137. searchParm: {
  138. page: 1,
  139. pageSize: 10,
  140. sort:'created_at',
  141. order:'desc',
  142. accountName:null,
  143. robotClientUuid:null,
  144. },
  145. total:0,
  146. list: [],
  147. uploadHeaders:{ Authorization: this.$store.getters.token },
  148. dialogAddVisible: false,
  149. dialogAddTitle: '新增',
  150. dialogDetailVisible: false,
  151. dialogDetailTitle: '详情',
  152. dialogEditVisible: false,
  153. dialogEditTitle: '修改',
  154. dialogImportVisible: false,
  155. dialogImportTitle:'导入',
  156. uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/ctRebot/import',
  157. tempUrl: process.env.VUE_APP_BASE_API + '/api/ctRebot/exportTemp',
  158. addParm: {
  159. id:null,
  160. accountName:null,
  161. robotClientUuid:null,
  162. },
  163. detailParm: {
  164. id:null,
  165. accountName:null,
  166. robotClientUuid:null,
  167. },
  168. editParm: {
  169. id:null,
  170. accountName:null,
  171. robotClientUuid:null,
  172. },
  173. rules: {
  174. accountName: [
  175. { required: true, message: '请输入机器人账号', trigger: 'blur' }
  176. ],
  177. robotClientUuid: [
  178. { required: true, message: '请输入uuid信息', trigger: 'blur' }
  179. ],
  180. }
  181. }
  182. },
  183. // 调用
  184. created() {
  185. this.goSearch()
  186. },
  187. //方法
  188. methods: {
  189. //重置
  190. resetForm() {
  191. this.searchParm.accountName = null;
  192. this.searchParm.robotClientUuid = null;
  193. this.goSearch()
  194. },
  195. // 查询
  196. goSearch() {
  197. this.searchParm.page=1
  198. this.getDataList()
  199. },
  200. //导入成功
  201. uploadSuccess(res, file) {
  202. this.dialogImportVisible = false;
  203. if(res.code==200) {
  204. console.log("********date:"+res.data)
  205. if(res.data == true) {
  206. this.$message.success('导入成功!');
  207. }
  208. else{
  209. window.location.href = res.data;
  210. this.$message.error('导入失败!');
  211. }
  212. }
  213. this.goSearch();
  214. },
  215. beforeAvatarUpload(file) {
  216. console.log(file);
  217. const isLt10M = file.size / 1024 / 1024 <10;
  218. if (!isLt10M) {
  219. this.$message.error('上传Excel文件大小不能超过 10MB!');
  220. }
  221. return isLt10M;
  222. },
  223. // 导入
  224. importBtn() {
  225. this.dialogImportVisible = true
  226. },
  227. //机器人模板
  228. exportTempBtn() {
  229. console.log(this.tempUrl)
  230. window.location.href = this.tempUrl;
  231. },
  232. // 新增
  233. addBtn(addParm){
  234. this.addParm = {
  235. id:null,
  236. accountName:null,
  237. robotClientUuid:null,
  238. }
  239. this.dialogAddTitle='新增'
  240. this.dialogAddVisible = true;
  241. this.$refs.addParm.clearValidate();
  242. },
  243. // 根据id删除
  244. delById(id){
  245. this.$confirm('确认删除?','提示',{
  246. confirmButtonText: '确定',
  247. cancelButtonText: '取消',
  248. type: 'warning'
  249. }).then(() => {
  250. delById({id}).then(res => {
  251. if(res.code==200) {
  252. this.$message.success('删除成功!')
  253. this.getDataList()
  254. }
  255. }).catch(err => {
  256. console.log(err)
  257. })
  258. }).catch(() => {
  259. this.$message.info('取消删除')
  260. })
  261. },
  262. // 修改
  263. editById(data){
  264. getById({id: data.id}).then(res => {
  265. if(res.code==200) {
  266. this.editParm.id = res.data.id;
  267. this.editParm.accountName = res.data.accountName;
  268. this.editParm.robotClientUuid = res.data.robotClientUuid;
  269. this.dialogEditVisible = true
  270. this.$refs.editParm.clearValidate();
  271. }
  272. }).catch(err => {
  273. console.log(err)
  274. })
  275. },
  276. updateStatus(data){
  277. console.log("==================updateStatus")
  278. updateStatus({id: data.id,status: 0}).then(res => {
  279. if(res.code==200) {
  280. this.$message.success('初始化状态成功!')
  281. this.getDataList()
  282. }
  283. }).catch(err => {
  284. console.log(err)
  285. })
  286. },
  287. // 确认修改
  288. sureEdit(editParm){
  289. this.$refs[editParm].validate((valid) => {
  290. if (valid) {
  291. this.$refs.editParm.clearValidate();
  292. editById(this.editParm).then(res => {
  293. if(res.code==200) {
  294. console.log(res)
  295. this.dialogEditVisible = false;
  296. this.$message.success('修改成功!')
  297. this.getDataList()
  298. }
  299. }).catch(err => {
  300. console.log(err)
  301. })
  302. } else {
  303. console.log('error submit!!');
  304. return false;
  305. }
  306. });
  307. },
  308. // 确认新增
  309. sureAdd(addParm){
  310. this.$refs[addParm].validate((valid) => {
  311. if (valid) {
  312. this.$refs.addParm.clearValidate();
  313. add(this.addParm).then(res => {
  314. if(res.code==200) {
  315. this.dialogAddVisible = false
  316. this.$message.success('新增成功!')
  317. this.getDataList()
  318. }
  319. }).catch(err => {
  320. console.log(err)
  321. })
  322. } else {
  323. console.log('error submit!!');
  324. return false;
  325. }
  326. });
  327. },
  328. sureAddCancle(addParm) {
  329. this.dialogAddVisible=flase;
  330. this.$refs.addParm.clearValidate();
  331. },
  332. sureExitCancle(editParm) {
  333. this.dialogEditVisible=false;
  334. this.$refs.editParm.clearValidate();
  335. },
  336. // 查看根据id
  337. getBtnById(id){
  338. getById({id}).then(res => {
  339. if(res.code==200) {
  340. this.detailParm.id = res.data.id;
  341. this.detailParm.accountName = res.data.accountName;
  342. this.detailParm.robotClientUuid = res.data.robotClientUuid;
  343. this.detailParm.status = res.data.status;
  344. this.dialogDetailVisible = true;
  345. }
  346. }).catch(err => {
  347. console.log(err)
  348. })
  349. },
  350. // 分页获取表格数据
  351. getDataList(){
  352. getList(this.searchParm).then(res => {
  353. console.log(res)
  354. if(res.code==200) {
  355. console.log(res)
  356. this.list = res.data.list;
  357. this.total = res.data.total;
  358. }
  359. }).catch(err => {
  360. console.log(err)
  361. })
  362. },
  363. // 分页
  364. handleSizeChange(val) {
  365. console.log(`每页 ${val} 条`);
  366. this.searchParm.pageSize = val;
  367. this.getDataList();
  368. },
  369. handleCurrentChange(val) {
  370. console.log(`当前页: ${val}`);
  371. this.searchParm.page = val;
  372. this.getDataList();
  373. }
  374. }
  375. }
  376. </script>
  377. <style rel="stylesheet/scss" lang="scss" scoped>
  378. </style>