postdischarge-ui/src/views/system/editorialSpecialization/index.vue

<template>
    <div class="app-container">
        <el-form ref="form" :inline="true" :model="form" label-width="140px">
            <el-form-item label="编辑专病管理路径">
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button>保存</el-button>
                <el-button type="primary">发布</el-button>
            </el-form-item>
        </el-form>
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item label="服务名称" prop="name">
                <el-input v-model="form.name" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="病种名称" required>
                <div>
                    病种名称
                </div>
            </el-form-item>
            <el-form-item label="版本号" prop="name">
                <el-input v-model="form.name" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item style="float: right;">
                <!-- <el-button type="primary" plain size="mini">AI生成触发条件</el-button> -->
                <el-button type="primary" plain size="mini" @click="add">人工添加主路径</el-button>
                <el-button type="primary" plain size="mini" @click="add">人工添加触发条件</el-button>
            </el-form-item>
        </el-form>
        <div class="list">
            <div class="item">
                <div class="title">
                    <el-tag>主路径</el-tag>
                    <span>不稳定</span>
                </div>
                <div class="progress">
                    <span>审核进度</span>
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
                    <span>{{ 26 + '/' + 70 }}</span>
                </div>
                <div class="title">
                    <span>适用范围:</span>
                    <span>出院</span>
                </div>
                <div>
                    <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "editorialSpecialization",
    data() {
        return {
            form: {
                name: '',
            },
            // 表单校验
            rules: {
                name: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
            },
        };
    },
    created() {
    },
    watch: {
    },
    methods: {
        add() {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                    path: "/specialdisease/specialDiseaseNode",
                    query: {
                    },
                });
            })
        },
    },
};
</script>
<style scoped lang="scss" scoped>
.list {
    width: 100%;
    background-color: #F2F3F5;
    padding: 28px 0;

    .item {
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        background-color: #fff;
        width: 96%;
        margin: 0 auto 28px;

        .el-icon-delete {
            padding-left: 16px;
        }

        .progress {
            width: 360px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            ::v-deep .el-progress {
                width: 200px;
            }
        }

        .title {
            display: flex;
            align-items: center;

            span {
                padding-left: 10px;
            }
        }
    }
}
</style>