qimall/backend/modules/admin/views/link/cate-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-cascader
                            expand-trigger="hover"
                            v-model="ruleForm.pid"
                            :options="options"
                            :props="{ checkStrictly: true }"
                            clearable
                            :show-all-levels="false"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item label="name">
                    <el-col :span="12">
                        <el-input type="text" v-model="ruleForm.name"></el-input>
                    </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 v-model="ruleForm.is_list" :label="0">否</el-radio>
                        <el-radio v-model="ruleForm.is_list" :label="1">是</el-radio>
                    </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,
                ruleForm: {
                    pid: 0,
                    name: '',
                    title: '',
                    is_list: 0,
                },
                options:[],
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/link/cate-edit',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (JSON.stringify(e.data.data.detail) != "[]") {
                            this.ruleForm = e.data.data.detail;
                        }
                        this.options = e.data.data.menu;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            handleChange(val) {
                this.ruleForm.pid = val[val.length-1];
            },
            submit(formName) {
                this.submitLoading = true;
                request({
                    params: {
                        r: 'admin/link/cate-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/cate-index'
                        })
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            }
        },
        computed: {

        }
    });
</script>