SmartCommunity/operationSupport/src/views/flow/popups/AddOrEdit.vue

<!--
 * @Author: zwy
 * @Date: 2021-02-01 11:46:07
 * @LastEditors: zwy
 * @LastEditTime: 2021-03-11 11:16:24
 * @Descripttion: 工作流管理-编辑弹框
-->
<template>
    <div class="flowModal">
        <div class="tree-style" v-if="params.todo == 'add'">
            <el-checkbox-group v-model="formData.companyIds">
                <el-checkbox v-for="item in organList" :label="item.id" :key="item.id">{{ item.communityName }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <zz-form class="form" :cols="formCols" :data="formData" :rules="formRules" labelWidth="100" ref="form">
            <template slot="businessType">
                <el-select v-model="formData.businessType" placeholder="请选择业务类型" @change="changeBusinessType">
                    <el-option label="安保巡更" :value="1"></el-option>
                    <el-option label="设备巡检" :value="2"></el-option>
                    <el-option label="运维工单" :value="3"></el-option>
                </el-select>
            </template>
            <template slot="taskType">
                <el-select v-model="formData.taskType" placeholder="请选择任务类型">
                    <el-option
                        v-for="(item, index) in taskTypeList"
                        :key="index"
                        :value="+item.dictCode"
                        :label="item.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </zz-form>
    </div>
</template>

<script>
export default {
    props: ['params'],
    data() {
        return {
            formType: [],
            organList: [],
            defaultProps: {
                children: 'orgs',
                label: 'communityName'
            },
            formData: {
                processName: '',
                businessType: '',
                taskType: '',
                companyIds: [],
                id: '',
                processDesc: '',
                companyOrgId: ''
            },
            taskTypeList: [],
            formCols: [
                [
                    {
                        label: '名称',
                        prop: 'processName',
                        input: true
                    },
                    {
                        label: '业务类型',
                        prop: 'businessType',
                        slot: 'businessType'
                    },
                    {
                        label: '任务类型',
                        prop: 'taskType',
                        slot: 'taskType'
                    },
                    {
                        label: '描述',
                        prop: 'processDesc',
                        input: true
                    }
                ]
            ],
            formRules: {
                processName: [this.$valid.inputRequired('名称')],
                businessType: [this.$valid.selectRequired('业务类型')],
                taskType: [this.$valid.selectRequired('业务类型')]
            }
        };
    },
    methods: {
        getOrgTreeList() {
            this.$http.get('/sc-community-web/assets/community/list').then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                    // this.$nextTick().then(() => {
                    //     const firstNode = document.querySelector('.el-tree-node');
                    //     firstNode.click();
                    // });
                }
            });
        },
        getTaskType(typeKey) {
            this.$api.common.getDictionaryData(typeKey).then(({ msg, status, data }) => {
                if (status == 0) {
                    this.taskTypeList = data;
                }
            });
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var posturl = '',
                    method = 'post';
                if (this.params.todo === 'edit') {
                    method = 'put';
                    posturl = '/sc-community/workflow/process/edit';
                    delete this.formData.companyIds;
                } else {
                    posturl = '/sc-community/workflow/process/add';
                    if (!this.formData.companyIds.length) {
                        this.$message.error('请勾选所属社区');
                        loading.close();
                        return;
                    }
                }
                var loading = this.$loading();
                this.$http[method](posturl, this.formData)
                    .then(({ status, data, msg }) => {
                        loading.close();
                        if (0 == status) {
                            this.$message.success(msg);
                            this.params.callback && this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                        loading.close();
                    });
            });
        },
        changeBusinessType() {
            this.formData.taskType = '';
            switch (this.formData.businessType) {
                case 1:
                    // this.getWorkList();
                    this.getTaskType('SC_SECURITY_PATROL');
                    break;
                case 2:
                    // this.getTaskList();
                    this.getTaskType('SC_EQUIPMENT_INSPECTION');
                    break;
                case 3:
                    this.getTaskType('SC_WORK_ORDER_TYPE');
            }
        }
    },
    created() {
        this.getOrgTreeList();
        if (this.params.todo == 'edit') {
            this.__setValue('formData');
            this.formData.communityId = this.params.data.communityId;
            switch (this.formData.businessType) {
                case 1:
                    // this.getWorkList();
                    this.getTaskType('SC_SECURITY_PATROL');
                    break;
                case 2:
                    // this.getTaskList();
                    this.getTaskType('SC_EQUIPMENT_INSPECTION');
                    break;
                case 3:
                    // this.getTaskType();
                    this.getTaskType('SC_WORK_ORDER_TYPE');
            }
            // this.isEdit=true
        }
    }
};
</script>

<style lang="scss" scoped>
.flowModal {
    display: flex;
    height: 100%;
    .tree-style {
        width: 340px;
        height: 100%;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        overflow: auto;
        padding: 20px;
        /deep/ .el-checkbox {
            line-height: 26px;
            display: block;
        }
    }
    .form {
        height: 100%;
        width: 100%;
        margin-left: 20px;
        border: 1px solid #d8d8d8;
        padding: 20px;
    }
}
</style>