index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="10" class="mb8">
  4. <el-col :span="18">
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0" @submit.native.prevent>
  6. <el-form-item label="" prop="tplName" style="margin-right:10px">
  7. <el-input
  8. v-model="queryParams.tplName"
  9. placeholder="请输入模板名称"
  10. clearable
  11. @keyup.enter="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  16. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  17. </el-form-item>
  18. </el-form>
  19. </el-col>
  20. <el-col :span="6" style="text-align: right">
  21. <el-button
  22. type="primary"
  23. plain
  24. icon="Plus"
  25. @click="handleAdd"
  26. v-if="!selectTpl"
  27. v-hasPermi="['metrics:tpl:add']"
  28. >新增
  29. </el-button>
  30. </el-col>
  31. </el-row>
  32. <el-table v-loading="loading" :data="tplList" border @selection-change="handleSelectionChange">
  33. <el-table-column type="selection" width="55" align="center" v-if="selectTpl"/>
  34. <el-table-column label="模板ID" align="center" prop="tplId" width="80"/>
  35. <el-table-column label="模板名称" align="left" prop="tplName"/>
  36. <el-table-column label="指标数量" align="left" prop="num" width="150"/>
  37. <el-table-column label="完成配置" align="center" width="120">
  38. <template #default="scope">
  39. <dict-tag :options="sys_yes_no" :value="scope.row.confStatus" />
  40. </template>
  41. </el-table-column>
  42. <el-table-column label="创建时间" align="center" prop="createTime" width="200" v-if="!selectTpl">
  43. <template #default="scope">
  44. <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
  45. </template>
  46. </el-table-column>
  47. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" :width="selectTpl?200:280">
  48. <template #default="scope">
  49. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:tpl:edit']" v-if="!selectTpl">
  50. 修改
  51. </el-button>
  52. <el-button link type="primary" icon="Position" v-hasPermi="['metrics:detail:list']" @click="handleDetail(scope.row)">指标管理</el-button>
  53. <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
  54. v-hasPermi="['metrics:tpl:remove']">删除
  55. </el-button>
  56. </template>
  57. </el-table-column>
  58. </el-table>
  59. <pagination
  60. v-show="total>0"
  61. :total="total"
  62. v-model:page="queryParams.pageNum"
  63. v-model:limit="queryParams.pageSize"
  64. @pagination="getList"
  65. />
  66. <!-- 添加或修改指标模板对话框 -->
  67. <el-dialog :title="title" v-model="open" :width="dialogType === 'add' ? 500 : 1100" append-to-body>
  68. <el-form ref="tplRef" :model="form" :rules="rules" label-width="80px" v-if="dialogType === 'add'">
  69. <el-form-item label="模板名称" prop="tplName">
  70. <el-input v-model="form.tplName" placeholder="请输入模板名称"/>
  71. </el-form-item>
  72. <el-form-item label="备注">
  73. <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
  74. </el-form-item>
  75. </el-form>
  76. <indicator-manger v-else ref="uRef" @updateList="getList"/>
  77. <template #footer>
  78. <div class="dialog-footer">
  79. <el-button type="primary" @click="submitForm" v-if="dialogType === 'add'">确 定</el-button>
  80. <el-button @click="cancel">取 消</el-button>
  81. </div>
  82. </template>
  83. </el-dialog>
  84. </div>
  85. </template>
  86. <script setup name="Tpl">
  87. import {addTpl, delTpl, getTpl, listTpl, updateTpl} from "@/api/metrics/tpl";
  88. import indicatorManger from "./component/indicatorManger.vue"
  89. const props = defineProps({
  90. selectTpl: {
  91. type: Boolean,
  92. default: false
  93. }
  94. })
  95. const {proxy} = getCurrentInstance();
  96. const { sys_yes_no } = proxy.useDict("sys_yes_no");
  97. const uRef = ref(null)
  98. const tplList = ref([]);
  99. const open = ref(false);
  100. const loading = ref(true);
  101. const showSearch = ref(true);
  102. const ids = ref([]);
  103. const single = ref(true);
  104. const multiple = ref(true);
  105. const total = ref(0);
  106. const title = ref("");
  107. const daterangeCreateTime = ref([]);
  108. const daterangeUpdateTime = ref([]);
  109. const dialogType = ref("add")
  110. const data = reactive({
  111. form: {},
  112. queryParams: {
  113. pageNum: 1,
  114. pageSize: 10,
  115. tplName: null,
  116. remark: null
  117. },
  118. rules: {
  119. tplName: [
  120. {required: true, message: "模板名称不能为空", trigger: "blur"}
  121. ],
  122. }
  123. });
  124. const {queryParams, form, rules} = toRefs(data);
  125. // 多选框选中数据
  126. function handleSelectionChange(selection) {
  127. ids.value = selection.map(item => item.tplId);
  128. }
  129. function emitIds(){
  130. let arr=[]
  131. tplList.value.forEach(p=>{
  132. if(ids.value.indexOf(p.tplId)!==-1){
  133. arr.push({...p})
  134. }
  135. })
  136. return arr;
  137. }
  138. defineExpose({emitIds})
  139. /** 查询指标模板列表 */
  140. function getList() {
  141. loading.value = true;
  142. queryParams.value.params = {};
  143. if (null != daterangeCreateTime && '' != daterangeCreateTime) {
  144. queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0];
  145. queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1];
  146. }
  147. if (null != daterangeUpdateTime && '' != daterangeUpdateTime) {
  148. queryParams.value.params["beginUpdateTime"] = daterangeUpdateTime.value[0];
  149. queryParams.value.params["endUpdateTime"] = daterangeUpdateTime.value[1];
  150. }
  151. listTpl(queryParams.value).then(response => {
  152. tplList.value = response.rows;
  153. total.value = response.total;
  154. loading.value = false;
  155. });
  156. }
  157. // 取消按钮
  158. function cancel() {
  159. open.value = false;
  160. reset();
  161. }
  162. // 表单重置
  163. function reset() {
  164. form.value = {
  165. tplId: null,
  166. tplName: null,
  167. tplCode: null,
  168. createBy: null,
  169. createTime: null,
  170. updateBy: null,
  171. updateTime: null,
  172. remark: null
  173. };
  174. proxy.resetForm("tplRef");
  175. }
  176. /** 搜索按钮操作 */
  177. function handleQuery() {
  178. queryParams.value.pageNum = 1;
  179. getList();
  180. }
  181. /** 重置按钮操作 */
  182. function resetQuery() {
  183. daterangeCreateTime.value = [];
  184. daterangeUpdateTime.value = [];
  185. proxy.resetForm("queryRef");
  186. handleQuery();
  187. }
  188. /** 新增按钮操作 */
  189. function handleAdd() {
  190. reset();
  191. open.value = true;
  192. title.value = "添加指标模板";
  193. dialogType.value = "add"
  194. }
  195. function handleDetail(row){
  196. open.value = true;
  197. title.value = "指标管理";
  198. dialogType.value = "details"
  199. nextTick(()=>{
  200. uRef.value.getSelectDetails(row.tplId)
  201. })
  202. }
  203. /** 修改按钮操作 */
  204. function handleUpdate(row) {
  205. reset();
  206. const _tplId = row.tplId || ids.value
  207. getTpl(_tplId).then(response => {
  208. dialogType.value = "add"
  209. form.value = response.data;
  210. open.value = true;
  211. title.value = "修改指标模板";
  212. });
  213. }
  214. /** 提交按钮 */
  215. function submitForm() {
  216. proxy.$refs["tplRef"].validate(valid => {
  217. if (valid) {
  218. if (form.value.tplId != null) {
  219. updateTpl(form.value).then(response => {
  220. proxy.$modal.msgSuccess("修改成功");
  221. open.value = false;
  222. getList();
  223. });
  224. } else {
  225. addTpl(form.value).then(response => {
  226. proxy.$modal.msgSuccess("新增成功");
  227. open.value = false;
  228. getList();
  229. });
  230. }
  231. }
  232. });
  233. }
  234. /** 删除按钮操作 */
  235. function handleDelete(row) {
  236. const _tplIds = row.tplId || ids.value;
  237. proxy.$modal.confirm('是否确认删除指标模板编号为"' + _tplIds + '"的数据项?').then(function () {
  238. return delTpl(_tplIds);
  239. }).then(() => {
  240. getList();
  241. proxy.$modal.msgSuccess("删除成功");
  242. }).catch(() => {
  243. });
  244. }
  245. getList();
  246. </script>