index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div class="com-formual">
  3. <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  4. <el-form-item label="公式名称:">
  5. <el-input v-model="queryForm.name" placeholder="请填写公式名称"></el-input>
  6. </el-form-item>
  7. <el-form-item>
  8. <el-button type="primary" @click="onBtnSearch"> <svg-icon icon-class="search"/> 搜索</el-button>
  9. <el-button type="primary" @click="onBtnCreate"> <svg-icon icon-class="plus"/> 新增公式</el-button>
  10. </el-form-item>
  11. </el-form>
  12. <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" empty-text="没有公式信息">
  13. <el-table-column prop="id" label="ID" align="center" width="80"/>
  14. <el-table-column prop="name" label="名称" align="left" width="180"/>
  15. <el-table-column prop="intro" label="介绍" align="center" width="150"/>
  16. <el-table-column prop="formula" label="内容" align="center" min-width="150"/>
  17. <el-table-column label="操作" align="center" width="350">
  18. <template #default="scope">
  19. <div class="btns">
  20. <el-button type="primary" size="mini" @click="btnPicked(scope.row)"><svg-icon icon-class="confirm"/>使用</el-button>
  21. <el-button type="primary" size="mini" @click="btnOnEdit(scope.row.id)"><svg-icon icon-class="edit"/>编辑</el-button>
  22. <el-button type="danger" size="mini"><svg-icon icon-class="delete"/>删除</el-button>
  23. </div>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. <div class="page-info">
  28. <el-pagination
  29. v-model:currentPage="queryForm.page"
  30. :page-size="queryForm.pageSize"
  31. :total="recordCount"
  32. :page-count="pageTotal"
  33. background
  34. layout="prev, pager, next"
  35. @current-change="ChangePage"
  36. >
  37. </el-pagination>
  38. </div>
  39. <el-dialog :visible.sync="dialogVisible" append-to-body v-el-drag-dialog :close-on-click-modal="false" width="300" custom-class="prod-verify" :title="title">
  40. <dataInfo :id="dataId" @onClose="onClose" :list="comList"></dataInfo>
  41. </el-dialog>
  42. </div>
  43. </template>
  44. <script>
  45. import{searchFormula} from'@/api/formula';
  46. import dataInfo from "./dataInfo";
  47. import elDragDialog from '@/directive/el-drag-dialog'
  48. export default{
  49. name:"Formula",
  50. emits:['onPicked'],
  51. directives: { elDragDialog },
  52. components:{
  53. dataInfo,
  54. },
  55. props:{
  56. comList:{
  57. type:Array,
  58. default:[]
  59. }
  60. },
  61. data(){
  62. return{
  63. dataId:0,
  64. dialogVisible:false,
  65. title:"创建公式",
  66. queryForm:{
  67. page:1,
  68. pageSize:10,
  69. name:'',
  70. },
  71. recordCount:0,
  72. pageTotal:1,
  73. dataList:[],
  74. }
  75. },
  76. mounted(){
  77. this.onBtnSearch();
  78. },
  79. methods:{
  80. onBtnCreate(e){
  81. let _this=this;
  82. _this.title="创建公式";
  83. _this.dataId=0;
  84. _this.dialogVisible=true;
  85. },
  86. btnOnEdit(id){
  87. this.title="编辑公式";
  88. this.dataId=id;
  89. this.dialogVisible=true;
  90. },
  91. onClose(e){
  92. let _this=this;
  93. _this.dialogVisible=false;
  94. _this.onBtnSearch();
  95. },
  96. onBtnSearch(e){
  97. let _this=this;
  98. _this.queryForm.page=1;
  99. _this.search();
  100. },
  101. btnPicked(e){
  102. this.$emit("onPicked",e);
  103. },
  104. //搜索
  105. search(){
  106. let _this=this;
  107. searchFormula(_this.queryForm).then(res=>{
  108. if(res.status!=200)return;
  109. _this.dataList=res.data.dataList;
  110. _this.recordCount=res.data.recordCount;
  111. _this.pageTotal=res.data.pageTotal;
  112. })
  113. },
  114. //修改分页
  115. ChangePage(e){
  116. let _this=this;
  117. _this.queryForm.page=e;
  118. _this.search();
  119. },
  120. }
  121. }
  122. </script>
  123. <style lang="scss">
  124. @import './index.scss';
  125. </style>