MrShi
2024-03-05 84b74d64ecc519882b89278f1011f7ac7525d190
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
154
155
156
157
158
159
160
161
162
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="保险公司" prop="name">
                <el-input v-model="form.name" placeholder="平安保险" v-trim/>
            </el-form-item>
            <div style="width: 100%; display: flex; align-items: center;margin-bottom: 10px;">
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="primary" @click="impor">导入工种</el-button>
                <el-button type="text" @click="exprot">导入模版xls</el-button>
            </div>
            <el-table
                :data="form.worktypeList"
                border
                style="width: 100%; margin-bottom: 20px;">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="工种名称">
                    <template slot-scope="{row}">
                        <el-input v-model="row.name" placeholder="请输入" v-trim/>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="color: red;" @click="dele(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <!--    上传工种    -->
        <input type="file" @change="getFile" style="opacity: 0;" ref="upload" accept=".xlsx" />
    </GlobalWindow>
</template>
 
<script>
    import BaseOpera from '@/components/base/BaseOpera'
    import GlobalWindow from '@/components/common/GlobalWindow'
    import { importExcel, all } from '@/api/business/worktype'
 
    export default {
        name: 'OperaInsuranceWindow',
        extends: BaseOpera,
        components: { GlobalWindow },
        data () {
            return {
                // 表单数据
                form: {
                    id: null,
                    name: '',
                    worktypeList: [
                        { name: '' }
                    ]
                },
                // 验证规则
                rules: {
                }
            }
        },
        created () {
            this.config({
                api: '/business/insurance',
                'field.id': 'id'
            })
        },
        methods: {
            open (title, target) {
                this.form.worktypeList = [{ name: '' }]
                this.title = title
                this.visible = true
                // 新建
                if (target == null) {
                    this.$nextTick(() => {
                        this.$refs.form.resetFields()
                        this.form[this.configData['field.id']] = null
                    })
                    return
                }
                // 编辑
                this.$nextTick(() => {
                    for (const key in this.form) {
                        this.form[key] = target[key]
                    }
                    all({ insuranceId: this.form.id })
                        .then(res => {
                            let arr = []
                            res.forEach(item => {
                                arr.push({ name: item.name })
                            })
                            this.form.worktypeList = arr
                        })
                })
            },
            // 导出模板
            exprot() {
                window.open(process.env.VUE_APP_TYPEWORK_URL)
                // let a = document.createElement("a");
                // a.href = '/public/file/typeWork.xlsx';
                // a.download = '保险公司-工种导入模版.xlsx';
                // a.click();
            },
            // 导入工种模板
            getFile(e) {
                const formdate = new FormData()
                formdate.append('file', e.target.files[0])
                importExcel(formdate)
                    .then(res => {
                        res.forEach(item => {
                            if (this.form.worktypeList.length === 0) {
                                this.form.worktypeList.push({ name: item })
                            } else {
                                let next = true
                                this.form.worktypeList.forEach(row => {
                                    if (row.name === item) {
                                        next = false
                                    }
                                })
                                if (next) {
                                    this.form.worktypeList.push({ name: item })
                                }
                            }
                        })
                    })
                    .catch(err => {
                        this.$message.error(err.message)
                    })
                    .finally(() => {
                        this.$refs.upload.value = null
                    })
            },
            // 上传文件
            impor() {
                this.$refs.upload.click()
            },
            add() {
                this.form.worktypeList.push({ name: '' })
            },
            dele(index) {
                if (this.form.worktypeList.length === 1) {
                    this.$message.warning('至少保留一项内容')
                    return
                }
                this.form.worktypeList.splice(index, 1)
            }
        }
    }
</script>