index.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <template>
  2. <div class="com-formual">
  3. <el-form
  4. :inline="true"
  5. :model="queryForm"
  6. v-if="type == 1"
  7. class="demo-form-inline"
  8. >
  9. <el-form-item label="类型:">
  10. <el-select
  11. v-model="queryForm.type"
  12. placeholder="请选择类型"
  13. size="large"
  14. style="width: 100%"
  15. >
  16. <el-option
  17. v-for="item in typeList"
  18. :key="item.value"
  19. :label="item.name"
  20. :value="item.value"
  21. />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="变名称:">
  25. <el-input
  26. v-model="queryForm.name"
  27. placeholder="请填写变量名称"
  28. ></el-input>
  29. </el-form-item>
  30. <el-form-item>
  31. <el-button type="primary" @click="onBtnSearch">
  32. <svg-icon icon-class="search" /> 搜索</el-button
  33. >
  34. <el-button type="primary" @click="onBtnCreate">
  35. <svg-icon icon-class="plus" /> 新增变量</el-button
  36. >
  37. </el-form-item>
  38. </el-form>
  39. <el-form
  40. :inline="true"
  41. :model="queryForm"
  42. v-if="type == 2"
  43. class="demo-form-inline"
  44. >
  45. <!-- <el-form-item label="类型:">
  46. <el-select v-model="queryForm.type" placeholder="请选择类型" size="large" style="width:100%;">
  47. <el-option
  48. v-for="item in typeList"
  49. :key="item.value"
  50. :label="item.name"
  51. :value="item.value"
  52. />
  53. </el-select>
  54. </el-form-item>
  55. <el-form-item label="变名称:">
  56. <el-input
  57. v-model="queryForm.name"
  58. placeholder="请填写变量名称"
  59. ></el-input>
  60. </el-form-item> -->
  61. <el-form-item>
  62. <!-- <el-button type="primary" @click="onBtnSearch">
  63. <svg-icon icon-class="search" /> 搜索</el-button
  64. > -->
  65. <el-button type="primary" @click="onBtnConst">
  66. <svg-icon icon-class="plus" /> 新增常量</el-button
  67. >
  68. </el-form-item>
  69. </el-form>
  70. <el-table
  71. :data="dataList"
  72. style="width: 100%"
  73. header-row-class-name="headerBg"
  74. empty-text="没有数据信息"
  75. >
  76. <el-table-column prop="id" label="ID" align="center" />
  77. <el-table-column prop="code" label="编码" align="left" />
  78. <el-table-column prop="name" label="名称" align="left" />
  79. <el-table-column
  80. prop="value"
  81. label="取值"
  82. v-if="type == 1"
  83. show-overflow-tooltip
  84. align="left"
  85. min-width="150"
  86. />
  87. <!-- <el-table-column prop="intro" label="介绍" show-overflow-tooltip align="left" min-width="150"/> -->
  88. <el-table-column label="操作" align="center" width="250">
  89. <template #default="scope">
  90. <div class="btns">
  91. <el-button type="primary" size="mini" @click="btnPicked(scope.row)"
  92. ><svg-icon icon-class="confirm" />使用</el-button
  93. >
  94. <el-button
  95. type="primary"
  96. size="mini"
  97. @click="btnOnEdit(scope.row.id, scope.row)"
  98. ><svg-icon icon-class="edit" />编辑</el-button
  99. >
  100. <el-button
  101. type="danger"
  102. size="mini"
  103. @click="btnOnDelete(scope.row.id)"
  104. ><svg-icon icon-class="delete" />删除</el-button
  105. >
  106. </div>
  107. </template>
  108. </el-table-column>
  109. </el-table>
  110. <div class="page-info">
  111. <el-pagination
  112. v-model:currentPage="queryForm.page"
  113. :page-size="queryForm.pageSize"
  114. :total="recordCount"
  115. :page-count="pageTotal"
  116. background
  117. layout="prev, pager, next"
  118. @current-change="ChangePage"
  119. >
  120. </el-pagination>
  121. </div>
  122. <el-dialog
  123. :visible.sync="dialogVisible"
  124. append-to-body
  125. v-el-drag-dialog
  126. width="300"
  127. custom-class="prod-verify"
  128. :title="title"
  129. @closed="handleDialogClosed"
  130. >
  131. <dataInfo
  132. ref="dataInfoRef"
  133. :id="dataId"
  134. :type="type"
  135. @onClose="onClose"
  136. ></dataInfo>
  137. </el-dialog>
  138. </div>
  139. </template>
  140. <script>
  141. import { searchParams, deleteParams } from "@/api/params";
  142. import elDragDialog from "@/directive/el-drag-dialog";
  143. import dataInfo from "./dataInfo";
  144. export default {
  145. name: "searchParams",
  146. emits: ["onPicked", "onData"],
  147. directives: { elDragDialog },
  148. components: {
  149. dataInfo,
  150. },
  151. props: {
  152. type: {
  153. type: Number,
  154. default: 1,
  155. },
  156. },
  157. watch: {
  158. type: {
  159. handler(val) {
  160. console.log(val);
  161. this.queryForm.type = val;
  162. this.onBtnSearch();
  163. },
  164. immediate: true,
  165. deep: true,
  166. },
  167. dataList: {
  168. handler(newVal, oldVal) {
  169. newVal.forEach((item, index) => {
  170. if (JSON.stringify(item) !== JSON.stringify(oldVal[index])) {
  171. this.$emit("onData", item);
  172. }
  173. });
  174. // Add any additional logic you need here
  175. },
  176. deep: true,
  177. },
  178. /* onData */
  179. },
  180. data() {
  181. return {
  182. dataId: 0,
  183. dialogVisible: false,
  184. title: "创建变量",
  185. queryForm: {
  186. page: 1,
  187. pageSize: 10,
  188. name: "",
  189. status: 5,
  190. type: 1,
  191. },
  192. typeList: [
  193. {
  194. value: 1,
  195. name: "变量",
  196. },
  197. {
  198. value: 2,
  199. name: "常量",
  200. },
  201. ],
  202. recordCount: 0,
  203. pageTotal: 1,
  204. dataList: [],
  205. };
  206. },
  207. mounted() {
  208. // this.onBtnSearch();
  209. },
  210. methods: {
  211. handleDialogClosed() {
  212. // 清空 dataInfo 组件内的表单
  213. if (this.$refs.dataInfoRef) {
  214. this.$refs.dataInfoRef.resetForm(); // 假设 dataInfo 组件有一个 resetForm 方法
  215. }
  216. },
  217. onClose(e) {
  218. let _this = this;
  219. _this.dialogVisible = false;
  220. _this.onBtnSearch();
  221. },
  222. btnOnDelete(e) {
  223. let _this = this;
  224. let par = {
  225. id: e,
  226. };
  227. _this
  228. .$confirm("您是否确认删除该记录?", "提示", {
  229. confirmButtonText: "确认",
  230. cancelButtonText: "取消",
  231. type: "warning",
  232. })
  233. .then((res) => {
  234. deleteParams(par).then((res) => {
  235. _this.search();
  236. });
  237. })
  238. .catch(() => {});
  239. },
  240. onBtnCreate(e) {
  241. let _this = this;
  242. _this.dataId = 0;
  243. _this.title = "创建变量";
  244. _this.dialogVisible = true;
  245. },
  246. btnOnEdit(id, row) {
  247. this.title = row.type == 1 ? "修改变量" : "修改常量";
  248. this.$nextTick(() => {
  249. this.dataId = id;
  250. this.dialogVisible = true;
  251. });
  252. },
  253. onBtnSearch(e) {
  254. let _this = this;
  255. _this.queryForm.page = 1;
  256. _this.search();
  257. },
  258. btnPicked(e) {
  259. this.$emit("onPicked", e);
  260. },
  261. //搜索
  262. search() {
  263. let _this = this;
  264. searchParams(_this.queryForm).then((res) => {
  265. if (!res) return;
  266. _this.dataList = res.data.dataList;
  267. _this.recordCount = res.data.totalRecord;
  268. _this.pageTotal = res.data.pageTotal;
  269. });
  270. },
  271. //修改分页
  272. ChangePage(e) {
  273. let _this = this;
  274. _this.queryForm.page = e;
  275. _this.search();
  276. },
  277. /* 新增常量 */
  278. onBtnConst() {
  279. let _this = this;
  280. _this.dataId = 0;
  281. _this.type = 2;
  282. _this.title = "创建常量";
  283. _this.dialogVisible = true;
  284. },
  285. },
  286. };
  287. </script>
  288. <style lang="scss">
  289. @import "./index.scss";
  290. </style>