yos_web/src/Form/terminalWorkBillModule/add.vue

<template>
    <div>
        <el-button size="mini" type="primary" @click="show">
            {{ title_btn ? $t(title_btn) : $t('新 建') }}
        </el-button>
        <el-dialog
            :title="title_drawer ? $t(title_drawer) : $t(`新建工单模板`)"
            append-to-body
            :visible.sync="dialogFormVisible"
            width="30%"
        >
            <el-row :gutter="20">
                <el-form
                    :model="form"
                    :rules="rules"
                    ref="form"
                    :label-width="tool.onlyZh('120px')"
                    label-position="right"
                    size="mini"
                >
                    <el-col :span="24">
                        <el-form-item :label="$t('模板名称：')" prop="name">
                            <el-input v-model="form.name" :placeholder="$t('请填写')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('工单类型：')" prop="type">
                            <el-cascader
                                v-model="form.type"
                                :options="typeOptions"
                                :props="typeProps"
                                clearable
                                :placeholder="$t('请选择')"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item>
                            <el-checkbox v-model="form.isworkorder" :true-label="1" :false-label="0">
                                {{ $t('是否有后续工单') }}
                            </el-checkbox>

                            <el-checkbox v-model="form.ispoints" :true-label="1" :false-label="0">
                                {{ $t('是否积分计算') }}
                            </el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="dialog-footer">
                <el-button size="small" @click="onCancel" class="normal-btn-width">{{ $t('取 消') }}</el-button>
                <el-button
                    :loading="loading"
                    class="normal-btn-width"
                    size="small"
                    :type="title_btn == '编辑' ? 'warning' : 'primary'"
                    @click="onSubmit"
                    >{{ title_btn == '编辑' ? $t('保 存') : $t('确 定') }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'add',
    props: { title_btn: String, title_drawer: String, data: Object },
    data() {
        return {
            typeOptions: [], //工单类型
            typeProps: {
                value: 'value',
                label: 'label',
                children: 'children',
                checkStrictly: true, //允许只选一级
            },
            loading: false,
            dialogFormVisible: false,
            currentData: {},
            form: {
                sc_workorder_templateid: 0,
                name: '', //模板名称
                type: '', //工单类型
                isused: 0, //是否启用
                isworkorder: 0, //是否有后续工单 否0，是1 默认否
                ispoints: 0, //是否积分计算 否0，是1 默认否
            },
            rules: {
                name: [{ required: true, message: this.$t('请填写模板名称'), trigger: 'blur' }],
                type: [{ required: true, message: this.$t('请选择工单类型'), trigger: 'change' }],
            },
        };
    },
    methods: {
        async getWorktype() {
            const res = await this.$store.dispatch('optiontypeselect', 'endcustomerserviceworktype');
            console.log('工单类型', res.data);
            this.typeOptions = res.data.map((item) => {
                return {
                    value: item.value,
                    label: item.value,
                    children:
                        item.subvalues && item.subvalues.length
                            ? item.subvalues.map((sub) => ({
                                  value: sub,
                                  label: sub,
                              }))
                            : undefined,
                };
            });
        },
        //初始化
        show() {
            this.getWorktype();
            this.dialogFormVisible = true;
            if (this.title_btn == '编辑') {
                this.form = Object.assign({}, this.form, this.data);
                this.form.type = this.data.type ? this.data.type.split('/') : [];
            }
        },
        onSubmit() {
            console.log(this.form);
            this.$refs['form'].validate(async (valid) => {
                if (!valid) return false;
                this.loading = true;
                this.form.type = this.form.type.join('/');
                const res = await this.$api.requested({
                    id: '2026051511251702',
                    content: this.form,
                });
                this.tool.showMessage(res, () => {
                    this.$emit('onSuccess');
                    this.loading = false;
                    this.$refs['form'].resetFields();
                    this.dialogFormVisible = false;
                });
            });
        },
        onCancel() {
            this.dialogFormVisible = false;
            this.$refs['form'].resetFields();
        },
        async queryType(type) {
            if (this.options[type].length == 0) {
                const res = await this.$store.dispatch('optiontypeselect', type);
                this.options[type] = res.data;
            }
        },
    },
};
</script>