add.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <div>
  3. <el-card>
  4. <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="this.pageStu == 'see'">
  5. <el-row :gutter="10">
  6. <el-col :span="1.5">
  7. <el-form-item label="单据编号" prop="code">
  8. <el-input
  9. v-model="form.code"
  10. size="mini"
  11. disabled
  12. style="width: 200px"
  13. />
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="1.5">
  17. <el-form-item label="单据日期" prop="date">
  18. <el-date-picker
  19. v-model="form.date"
  20. clearable
  21. type="date"
  22. value-format="yyyy-MM-dd"
  23. size="mini"
  24. style="width: 200px"
  25. >
  26. </el-date-picker>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="1.5">
  30. <el-form-item label="目标名称" prop="name">
  31. <el-input
  32. v-model="form.name"
  33. size="mini"
  34. style="width: 200px"
  35. />
  36. </el-form-item>
  37. </el-col>
  38. <!-- <el-col :span="1.5">
  39. <el-form-item label="包含下级组织" >
  40. <el-select v-model="form.includeOrg" size="mini" style="width: 200px">
  41. <el-option
  42. v-for="dict in dict.type.sys_yes_no"
  43. :key="dict.value"
  44. :label="dict.label"
  45. :value="dict.value"
  46. ></el-option>
  47. </el-select>
  48. </el-form-item>
  49. </el-col> -->
  50. <el-col :span="1.5">
  51. <el-form-item label="模板" prop="template">
  52. <dr-popover-select size="mini" v-model="form.templateName" title="模板" type="MK_TARGET_TEMPLATE_PARAM" :dataMapping="{
  53. template: 'id',
  54. templateName: 'name',
  55. }" :source.sync="form"
  56. >
  57. </dr-popover-select>
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. <el-card shadow="never">
  62. <el-descriptions title="模板信息">
  63. <el-descriptions-item label="年度">{{template.year}}</el-descriptions-item>
  64. <el-descriptions-item label="开始日期">{{template.startTime}}</el-descriptions-item>
  65. <el-descriptions-item label="结束日期">{{template.deadlineTime}}</el-descriptions-item>
  66. <el-descriptions-item label="周期">
  67. <div v-for="dict in dict.type.mk_periodic_unit" v-if="template.cycle == dict.value">
  68. <el-tag size="small">{{dict.label}}</el-tag>
  69. </div>
  70. </el-descriptions-item>
  71. <el-descriptions-item label="维度">
  72. <div v-for="d in template.dimensionalitys">
  73. <!-- <el-tag size="small">{{d.dimensionality}}</el-tag> -->
  74. <div v-for="dict in dict.type.mk_dimensionality" v-if="d.dimensionality == dict.value">
  75. <el-tag size="small">{{dict.label}}</el-tag>
  76. </div>
  77. </div>
  78. </el-descriptions-item>
  79. <el-descriptions-item label="指标">
  80. <div v-for="d in template.indexs">
  81. <!-- <el-tag size="small">{{d.target}}</el-tag> -->
  82. <div v-for="dict in dict.type.mk_index_type" v-if="d.target == dict.value">
  83. <el-tag size="small">{{dict.label}}</el-tag>
  84. </div>
  85. </div>
  86. </el-descriptions-item>
  87. <el-descriptions-item label="展开方式">
  88. <div v-for="dict in dict.type.mk_expansion_mode" v-if="template.unfold == dict.value">
  89. <el-tag size="small">{{dict.label}}</el-tag>
  90. </div>
  91. </el-descriptions-item>
  92. </el-descriptions>
  93. </el-card>
  94. </el-form>
  95. </el-card>
  96. <el-card style="height:500px">
  97. <Item ref="child" v-if="isItem" :pageStu="pageStu" :template="template" :form="form" :columns="headers" :latestTemplate="latestTemplate"></Item>
  98. </el-card>
  99. <el-card>
  100. <div class="btn_group">
  101. <el-col :span="1.5">
  102. <el-button size="mini" plain @click="useBack">取消</el-button>
  103. </el-col>
  104. <el-col :span="1.5" style="margin: 0 10px;">
  105. <el-button type="primary" size="mini" plain @click="useSave" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
  106. </el-col>
  107. </div>
  108. </el-card>
  109. </div>
  110. </template>
  111. <script>
  112. import Item from './item.vue'
  113. import { getTargetTemplate,getHeaderData } from "@/api/business/spd/starget/targetTemplate";
  114. import { getTarget,addTarget,updateTarget } from "@/api/business/spd/starget/target";
  115. export default {
  116. name: 'add',
  117. dicts: ['sys_yes_no','mk_periodic_unit','mk_dimensionality','mk_index_type','mk_expansion_mode'],
  118. props: ['pageStu','row', 'disable'],
  119. components: {Item},
  120. model: {
  121. prop: 'isList',
  122. event: 'jugislist'
  123. },
  124. data() {
  125. return {
  126. template:{},
  127. form:{},
  128. //表单校验
  129. rules: {
  130. date: [
  131. { required: true, message: "单据日期不能为空", trigger: "blur" },
  132. ],
  133. name: [
  134. { required: true, message: "目标名称不能为空", trigger: "blur" },
  135. ],
  136. template: [
  137. { required: true, message: "模板不能为空", trigger: "blur" },
  138. ],
  139. },
  140. //子表表头数据
  141. headers:[],
  142. //遮罩
  143. loading: false,
  144. //是否展示Item组件
  145. isItem:false,
  146. //是否为最新模板
  147. latestTemplate:false,
  148. }
  149. },
  150. async created() {
  151. if(this.pageStu == 'add'){
  152. this.form.date = new Date();
  153. }
  154. if(this.pageStu == 'edit' || this.pageStu == 'see') {
  155. await this.fetchTarget(this.row);
  156. await this.fetchTemplate(this.row.template);
  157. await this.fetchHeaderData(this.row.template);
  158. this.latestTemplate = true;
  159. this.isItem = true;
  160. }
  161. },
  162. watch: {
  163. 'form.template': {
  164. async handler(newVal) {
  165. console.log('111');
  166. this.isItem = false;
  167. await this.fetchTemplate(newVal);
  168. await this.fetchHeaderData(newVal);
  169. this.isItem = true;
  170. },
  171. immediate:false,
  172. }
  173. },
  174. methods: {
  175. //保存
  176. async useSave(){
  177. let passrule = false;
  178. this.$refs["form"].validate((valid) => {
  179. if (valid) {
  180. passrule = true;
  181. }
  182. });
  183. if(passrule){
  184. try {
  185. this.form.items = this.$refs.child.merge();
  186. if(!this.form.items.length){
  187. this.$modal.msgError("子表数据不能为空!");
  188. return;
  189. }
  190. console.log('this.form',this.form);
  191. this.loading = true;
  192. let res = null;
  193. if(this.pageStu == 'add'){
  194. res = await addTarget(this.form);
  195. }
  196. if(this.pageStu == 'edit'){
  197. res = await updateTarget(this.form);
  198. }
  199. if (res.code === 200) {
  200. this.$modal.msgSuccess("保存成功");
  201. this.useBack();
  202. }
  203. } catch (err) {
  204. // catch
  205. console.error(err);
  206. } finally {
  207. this.loading = false;
  208. }
  209. }
  210. },
  211. //返回
  212. useBack(){
  213. this.$emit('jugislist', true)
  214. this.$emit('refresh')
  215. },
  216. //查询目标模板
  217. async fetchTemplate(id) {
  218. try {
  219. this.loading = true;
  220. const { code, data } = await getTargetTemplate(id);
  221. if (code === 200) {
  222. this.template = data;
  223. return true;
  224. } else {
  225. return false;
  226. }
  227. } catch (err) {
  228. // catch
  229. console.error(err);
  230. } finally {
  231. // finally
  232. this.loading = false;
  233. }
  234. },
  235. //查询详情
  236. async fetchTarget(row){
  237. await getTarget(row.id).then(res => {
  238. if (res.code === 200) {
  239. this.form = res.data
  240. }
  241. })
  242. },
  243. //查询动态表头数据
  244. async fetchHeaderData(id){
  245. await getHeaderData(id).then(res => {
  246. if (res.code === 200) {
  247. this.headers = res.rows
  248. }
  249. })
  250. },
  251. }
  252. }
  253. </script>
  254. <style lang="scss" scoped>
  255. .btn_group {
  256. width: 100%;
  257. margin: 20px 0;
  258. display: flex;
  259. justify-content: right;
  260. }
  261. </style>