qimall/backend/modules/admin/views/link/edit.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-02
 * Time: 12:36
 */
?>


<div id="app" v-cloak>

    <el-card v-loading="loading" style="border:0;min-width: 1200px;" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
        <el-form :model="ruleForm"
                 ref="ruleForm"
                 label-width="172px"
                 style="position: relative"
                 size="small">
            <el-card shadow="never" class="mt-24">
                <div slot="header">
                    <span>链接编辑</span>
                </div>

                <el-form-item label="类型">
                    <el-col :span="12">
                        <el-cascader
                                expand-trigger="hover"
                                v-model="ruleForm.cat_id"
                                :options="options"
                                :props="{ checkStrictly: true }"
                                clearable
                                :show-all-levels="false"
                                @change="handleChange">
                        </el-cascader>
                    </el-col>
                </el-form-item>

                <el-form-item label="标题">
                    <el-col :span="12">
                        <el-input type="text" v-model="ruleForm.title"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="类型">
                    <el-col :span="12">
                        <el-radio-group v-model="ruleForm.open_type">
                            <el-radio v-for="value,key in open_type_list" :key="key" :label="key" border>{{value}}</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>

                <el-form-item label="U-APP路由" v-if="ruleForm.open_type == 'page'">
                    <el-col :span="12">
                        <el-input type="text" v-model="ruleForm.route"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="备注">
                    <el-col :span="12">
                        <el-input type="text" v-model="ruleForm.remark"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col :span="12">
                        <el-button :loading="submitLoading" size="small" type="primary"
                                   @click="submit('ruleForm')">保存
                        </el-button>
                    </el-col>
                </el-form-item>
            </el-card>

        </el-form>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                options:[],
                ruleForm: {
                    title: '',
                    cat_id: '',
                    open_type: 'page',
                    category: [],
                    route: '',
                },
                open_type_list: [],
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/link/edit',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (e.data.data) {
                            if (!isEmpty(e.data.data.detail)) this.ruleForm = e.data.data.detail;
                            if (!isEmpty(e.data.data.menu)) this.options = e.data.data.menu;
                            if (!isEmpty(e.data.data.open_type_list)) this.open_type_list = e.data.data.open_type_list;
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            submit(formName) {
                this.submitLoading = true;
                this.ruleForm.id = getQuery('id');
                request({
                    params: {
                        r: 'admin/link/edit',
                    },
                    method: 'post',
                    data: {
                        detail: this.ruleForm
                    },
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);

                        navigateTo({
                            r: 'admin/link/index'
                        })
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            handleChange(val) {
                if (typeof val != 'undefined') {
                    this.ruleForm.cat_id = val[val.length-1];
                }
            },
        },
        computed: {

        }
    });
</script>