马宇豪
2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowDialog" width="50%">
            <el-form :model="spiForm" size="default" ref="userRef" :rules="spiFormRules" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="总值" prop="value">
                            <el-input v-model.trim="spiForm.value" type="number" placeholder="请输入当月总值" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
 
<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {riskWarningApi} from "/@/api/riskWarning";
// 定义接口来定义对象的类型
interface DeptData {}
interface sexData {}
interface UserState {
    title: string;
    isShowDialog: boolean;
    spiForm: {
        id?: number | null
        time: string | null
        value: number | null
    };
    spiFormRules:{
 
    }
}
 
export default defineComponent({
    name: 'spiDialog',
    setup(props, context) {
        const userRef = ref()
        const state = reactive<UserState>({
            title: '',
            isShowDialog: false,
            spiForm: {
              id: null,
              time: '',
              value: null
            },
            spiFormRules:{
                value: [{ required: true, message: '请填写spi总值', trigger: 'blur' }],
            }
        });
        // 打开弹窗
        const openDialog = (type: string, val: any) => {
            state.isShowDialog = true
            if (type === '新增') {
                state.title = '新增SPI总值'
                state.spiForm = {
                  id: null,
                  time: '',
                  value: null
                }
                getTime()
            } else {
                state.title = '修改SPI总值'
                const {id,time,value} = val
                state.spiForm = {id,time, value}
            }
        };
 
      // 时间格式化
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
 
      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        state.spiForm.time = curTime.substring(0,7)
      }
 
        // 新增修改
        const onSubmit = async () => {
            userRef.value.validate(async (valid:Boolean) => {
                if(valid){
                    if (state.title === '新增SPI总值') {
                      const {id,...data} = state.spiForm
                      data.value = Number(state.spiForm.value)
                        let res = await riskWarningApi().addSpi(data);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '新增成功',
                                duration: 2000
                            });
                            state.isShowDialog = false;
                            context.emit('getSpiList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        state.spiForm.value = Number(state.spiForm.value)
                        let res = await riskWarningApi().modSpi(state.spiForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                                duration: 2000
                            });
                            state.isShowDialog = false;
                            context.emit('getSpiList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                }else{
                    ElMessage({
                        type:'warning',
                        message:'请完善基本信息'
                    })
                }
            })
 
        };
 
        // 页面加载时
        onMounted(() => {});
        return {
            userRef,
            openDialog,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>