123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <template>
- <div>
- <el-card>
- <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="this.pageStu == 'see'">
- <el-row :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="单据编号" prop="code">
- <el-input
- v-model="form.code"
- size="mini"
- disabled
- style="width: 200px"
- />
- </el-form-item>
- </el-col>
- <el-col :span="1.5">
- <el-form-item label="单据日期" prop="date">
- <el-date-picker
- v-model="form.date"
- clearable
- type="date"
- value-format="yyyy-MM-dd"
- size="mini"
- style="width: 200px"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="1.5">
- <el-form-item label="目标名称" prop="name">
- <el-input
- v-model="form.name"
- size="mini"
- style="width: 200px"
- />
- </el-form-item>
- </el-col>
- <!-- <el-col :span="1.5">
- <el-form-item label="包含下级组织" >
- <el-select v-model="form.includeOrg" size="mini" style="width: 200px">
- <el-option
- v-for="dict in dict.type.sys_yes_no"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col> -->
- <el-col :span="1.5">
- <el-form-item label="模板" prop="template">
- <dr-popover-select size="mini" v-model="form.templateName" title="模板" type="MK_TARGET_TEMPLATE_PARAM" :dataMapping="{
- template: 'id',
- templateName: 'name',
- }" :source.sync="form"
- >
- </dr-popover-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-card shadow="never">
- <el-descriptions title="模板信息">
- <el-descriptions-item label="年度">{{template.year}}</el-descriptions-item>
- <el-descriptions-item label="开始日期">{{template.startTime}}</el-descriptions-item>
- <el-descriptions-item label="结束日期">{{template.deadlineTime}}</el-descriptions-item>
- <el-descriptions-item label="周期">
- <div v-for="dict in dict.type.mk_periodic_unit" v-if="template.cycle == dict.value">
- <el-tag size="small">{{dict.label}}</el-tag>
- </div>
- </el-descriptions-item>
- <el-descriptions-item label="维度">
- <div v-for="d in template.dimensionalitys">
- <!-- <el-tag size="small">{{d.dimensionality}}</el-tag> -->
- <div v-for="dict in dict.type.mk_dimensionality" v-if="d.dimensionality == dict.value">
- <el-tag size="small">{{dict.label}}</el-tag>
- </div>
- </div>
- </el-descriptions-item>
- <el-descriptions-item label="指标">
- <div v-for="d in template.indexs">
- <!-- <el-tag size="small">{{d.target}}</el-tag> -->
- <div v-for="dict in dict.type.mk_index_type" v-if="d.target == dict.value">
- <el-tag size="small">{{dict.label}}</el-tag>
- </div>
- </div>
- </el-descriptions-item>
- <el-descriptions-item label="展开方式">
- <div v-for="dict in dict.type.mk_expansion_mode" v-if="template.unfold == dict.value">
- <el-tag size="small">{{dict.label}}</el-tag>
- </div>
- </el-descriptions-item>
- </el-descriptions>
- </el-card>
- </el-form>
- </el-card>
- <el-card style="height:500px">
- <Item ref="child" v-if="isItem" :pageStu="pageStu" :template="template" :form="form" :columns="headers" :latestTemplate="latestTemplate"></Item>
- </el-card>
- <el-card>
- <div class="btn_group">
- <el-col :span="1.5">
- <el-button size="mini" plain @click="useBack">取消</el-button>
- </el-col>
- <el-col :span="1.5" style="margin: 0 10px;">
- <el-button type="primary" size="mini" plain @click="useSave" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
- </el-col>
- </div>
- </el-card>
- </div>
- </template>
- <script>
- import Item from './item.vue'
- import { getTargetTemplate,getHeaderData } from "@/api/business/spd/starget/targetTemplate";
- import { getTarget,addTarget,updateTarget } from "@/api/business/spd/starget/target";
- export default {
- name: 'add',
- dicts: ['sys_yes_no','mk_periodic_unit','mk_dimensionality','mk_index_type','mk_expansion_mode'],
- props: ['pageStu','row', 'disable'],
- components: {Item},
- model: {
- prop: 'isList',
- event: 'jugislist'
- },
- data() {
- return {
- template:{},
- form:{},
- //表单校验
- rules: {
- date: [
- { required: true, message: "单据日期不能为空", trigger: "blur" },
- ],
- name: [
- { required: true, message: "目标名称不能为空", trigger: "blur" },
- ],
- template: [
- { required: true, message: "模板不能为空", trigger: "blur" },
- ],
- },
- //子表表头数据
- headers:[],
- //遮罩
- loading: false,
- //是否展示Item组件
- isItem:false,
- //是否为最新模板
- latestTemplate:false,
- }
- },
- async created() {
- if(this.pageStu == 'add'){
- this.form.date = new Date();
- }
- if(this.pageStu == 'edit' || this.pageStu == 'see') {
- await this.fetchTarget(this.row);
- await this.fetchTemplate(this.row.template);
- await this.fetchHeaderData(this.row.template);
- this.latestTemplate = true;
- this.isItem = true;
- }
- },
- watch: {
- 'form.template': {
- async handler(newVal) {
- console.log('111');
- this.isItem = false;
- await this.fetchTemplate(newVal);
- await this.fetchHeaderData(newVal);
- this.isItem = true;
- },
- immediate:false,
- }
- },
- methods: {
- //保存
- async useSave(){
- let passrule = false;
- this.$refs["form"].validate((valid) => {
- if (valid) {
- passrule = true;
- }
- });
- if(passrule){
- try {
- this.form.items = this.$refs.child.merge();
- if(!this.form.items.length){
- this.$modal.msgError("子表数据不能为空!");
- return;
- }
- console.log('this.form',this.form);
- this.loading = true;
- let res = null;
- if(this.pageStu == 'add'){
- res = await addTarget(this.form);
- }
- if(this.pageStu == 'edit'){
- res = await updateTarget(this.form);
- }
- if (res.code === 200) {
- this.$modal.msgSuccess("保存成功");
- this.useBack();
- }
- } catch (err) {
- // catch
- console.error(err);
- } finally {
- this.loading = false;
- }
- }
- },
- //返回
- useBack(){
- this.$emit('jugislist', true)
- this.$emit('refresh')
- },
- //查询目标模板
- async fetchTemplate(id) {
- try {
- this.loading = true;
- const { code, data } = await getTargetTemplate(id);
- if (code === 200) {
- this.template = data;
- return true;
- } else {
- return false;
- }
- } catch (err) {
- // catch
- console.error(err);
- } finally {
- // finally
- this.loading = false;
- }
- },
- //查询详情
- async fetchTarget(row){
- await getTarget(row.id).then(res => {
- if (res.code === 200) {
- this.form = res.data
- }
- })
- },
- //查询动态表头数据
- async fetchHeaderData(id){
- await getHeaderData(id).then(res => {
- if (res.code === 200) {
- this.headers = res.rows
- }
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .btn_group {
- width: 100%;
- margin: 20px 0;
- display: flex;
- justify-content: right;
- }
- </style>
|