shuhi-ui/src/views/recycleOrder/components/order-remarks.vue

<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="760" v-model="visible" title="回收订单备注" @open="handleOpen">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="选择标签" prop="label">
                <el-radio-group v-model="form.label">
                    <el-radio v-for="item in tags" :value="item" :key="item"><el-icon :color="item" :size="18">
                            <Flag />
                        </el-icon></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注信息" prop="remark">
                <el-input :rows="4" type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>

        </el-form>

        <orderTimeline :records="activities" title="备注历史记录" :orderId="form.orderId"></orderTimeline>

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
import { EleMessage } from 'ele-admin-plus';
import orderTimeline from '@/views/recycleOrder/components/order-timeline.vue';
import request from '@/utils/request';

const tags = reactive(['green', 'blue', 'yellow', 'red', 'purple']);

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 关闭弹窗 */
const handleCancel = () => {
    visible.value = false;
};

const form = ref({
    orderId: '',
    label: '',
    remark: ''
});

/** 弹窗打开事件 */
const handleOpen = (data) => {
    visible.value = true;
    nextTick(() => {
        data && (form.value.orderId = data.orderId);
    });
};

/** 确定 /order/orderInfo/addRemark */
const formRef = ref(null);
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            request.post('/order/orderInfo/addRemark', form.value).then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success('操作成功');
                    handleCancel();
                } else {
                    EleMessage.error(res.data.msg);
                }
            });
        }
    });
};

/** 表单验证规则 */
const rules = reactive({
    label: [
        {
            required: true,
            message: '请选择标签',
            type: 'string',
            trigger: 'change'
        }
    ],
    remark: [
        {
            required: true,
            message: '请输入备注信息',
            type: 'string',
            trigger: 'blur'
        }
    ]
});

const activities = [
    {
        content: 'Event start',
        timestamp: '2018-04-15',
        color: '#0bbd87',
        icon: ChatDotSquare
    },
    {
        content: 'Approved',
        timestamp: '2018-04-13',
        color: '#0bbd87',
        icon: ChatDotSquare
    },
    {
        content: 'Success',
        timestamp: '2018-04-11',
        color: '#0bbd87',
        icon: ChatDotSquare
    }
];

defineExpose({
    handleOpen
});
</script>