From 567c3427d1ae71ce3f92ed7c7b1217715cc5c719 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 20 Jun 2025 15:49:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A4=BA=E4=BE=8B=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/form_qua_ic.svg  |   1 +
 src/views/DemoTable.vue     | 559 ++++++++++++++++++++++++++++++--------------
 src/views/elementGroups.vue |   6 +
 3 files changed, 389 insertions(+), 177 deletions(-)
 create mode 100644 src/assets/form_qua_ic.svg

diff --git a/src/assets/form_qua_ic.svg b/src/assets/form_qua_ic.svg
new file mode 100644
index 0000000..5831ba3
--- /dev/null
+++ b/src/assets/form_qua_ic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14.000000953674316" height="14.000114440917969" viewBox="0 0 14.000000953674316 14.000114440917969"><g><path d="M6.99997,0C3.13397,0,0,3.13402,0,7.00003C0,10.8661,3.13397,14.0001,6.99997,14.0001C10.866,14.0001,14,10.8661,14,7.00006C14,3.13405,10.8661,0,6.99997,0ZM7.67931,11.0393C7.67931,11.2326,7.52265,11.3894,7.32932,11.3894L6.27931,11.3894C6.08606,11.3894,5.92934,11.2326,5.92934,11.0393L5.92934,9.98936C5.92934,9.79601,6.08606,9.63931,6.27931,9.63931L7.32932,9.63931C7.52264,9.63931,7.67931,9.79599,7.67931,9.98936L7.67931,11.0393ZM9.41428,6.22158C9.2736,6.42218,8.95427,6.67778,8.5545,6.98942L8.11148,7.29514C7.89631,7.46204,7.70548,7.65635,7.63491,7.87882C7.61079,7.95462,7.59272,8.07919,7.58056,8.21373C7.57443,8.28143,7.51387,8.41954,7.37231,8.41954L6.2329,8.41954C6.0477,8.41954,6.01462,8.27448,6.01771,8.20352C6.03821,7.73845,6.08083,7.32557,6.27031,7.10329Q6.65395,6.65348,7.52686,6.0936C7.65976,5.99331,7.76736,5.88429,7.84873,5.76547C7.99666,5.5615,8.11939,5.33749,8.11939,5.09263C8.11939,4.8112,8.03711,4.55467,7.87201,4.32247C7.70748,4.09118,7.4061,3.97531,6.96939,3.97531C6.53948,3.97531,6.23474,4.118,6.05511,4.40325C5.9224,4.614,5.83885,4.80778,5.80426,5.01862C5.79195,5.09324,5.7441,5.25041,5.5846,5.25041L4.47332,5.25041C4.2367,5.25041,4.1846,5.09707,4.19143,5.02315C4.27709,4.09158,4.64113,3.45509,5.28481,3.04639C5.7225,2.765,6.26099,2.62379,6.89974,2.62379C7.73906,2.62379,8.43578,2.82387,8.99123,3.2246C9.5457,3.62477,9.82373,4.21775,9.82373,5.004C9.82378,5.48549,9.65479,5.89152,9.41428,6.22158L9.41428,6.22158Z" fill="#8A9099" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/views/DemoTable.vue b/src/views/DemoTable.vue
index cd762da..9d78423 100644
--- a/src/views/DemoTable.vue
+++ b/src/views/DemoTable.vue
@@ -1,216 +1,421 @@
 <template>
-    <div class="demo-wrap min-flex-right">
-        <div class="flex-between">
-            <h2>站点列表</h2>
-            <el-form :model="form">
-                <GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%"
-                    :options="options_payword" />
+    <div class="site-setting-wrap pagePadding min-flex-right">
+        <div class="siteMessage flex-common" id="siteMessage1">
+            <h3>基础信息</h3>
+            <el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <el-form-item prop="avator" label="" class="special-form-item">
+                            <template #label>
+                                <div class="custom-label flex">
+                                    医生照片
+                                    <img class="labelImg" src="@/assets/require.svg" alt="">
+                                    <el-tooltip content="这是提示信息">
+                                        <img class="labelImg" src="@/assets/form_qua_ic.svg" alt="">
+                                    </el-tooltip>
+                                </div>
+                            </template>
+                            <div class="qqCode-wrap right">
+                                <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false" 
+                                action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :on-change="handleFileChange" :auto-upload="false"
+                                    :before-upload="beforeAvatarUpload">
+                                    <hover-button slot="trigger" button-text="重新上传"
+                                        :default-icon="require('../assets/upLoad_grey.svg')"
+                                        :hover-icon="require('../assets/upLoad_active.svg')"
+                                        default-text-color="#23242B" hover-text-color="#006AFF" />
+                                    <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                                </el-upload>
+                            </div>
+                        </el-form-item>
+                        <GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名"
+                            v-model="siteForm.doctor_name" prop="doctor_name" placeholder="请输入" />
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <GuipInput ref="GuipInput" column="column" :required="true" label="身份证号码"
+                            v-model="siteForm.idcard" prop="idcard" placeholder="请输入" />
+                        <GuipInput ref="GuipInput" column="column" :required="true" label="手机号码"
+                            v-model="siteForm.phone" prop="phone" placeholder="常用手机号" />
+                    </div>
+                </div>
             </el-form>
+            <GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitForm('siteForm')" />
+
         </div>
-        <div class=" flex-common" id="">
-            <el-form>
-                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
-                    style="width: 100%" :key="random()">
-                    <el-table-column type="index" label="排序" width="100">
-                    </el-table-column>
-                    <!-- 其他列 -->
-                    <el-table-column prop="name" label="站点简称" width="210">
-                        <template slot-scope="scope">
-                            <a class="name_link flex cell_render" :href="scope.row.link" target="_blank">
-                                {{ scope.row.name }}
-                                <img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
-                            </a>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="registerDate" label="注册时间"></el-table-column>
-                    <el-table-column prop="count" label="6月订单数" sortable width="230">
-                        <template slot-scope="scope">
-                            <div class="flex">
-                                {{ scope.row.count }}
-                                <span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{
-                                    scope.row.percentage }}%上年持平</span>
+        <div class="siteMessage flex-common" id="siteMessage2">
+            <p class="littleTitle mb32">初诊审批</p>
+            <el-form :model="siteForm" :rules="siteFormrules2" ref="siteForm2">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipRadio v-model="siteForm.first_visit_audit" class="mb12" column="column" :options="groupOptions"
+                            label="初诊是否审批" required prop="first_visit_audit" @change="radioChange" />
+                        <GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项"
+                            v-model="siteForm.approve_phone" prop="approve_phone" placeholder="请输入" />
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="审批人微信" >
+                            <span class="desc" slot="formRight">审批人电话、微信，至少填写一项</span>
+                            <div class="qqCode-wrap right" slot="formDom">
+                                <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false"
+                                    action="https://jsonplaceholder.typicode.com/posts/" 
+                                    :on-preview="handlePreview" :on-remove="handleRemove"
+                                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                                    <hover-button button-text="微信二维码"
+                                        :default-icon="require('../assets/upLoad_grey.svg')"
+                                        :hover-icon="require('../assets/upLoad_active.svg')"
+                                        default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
+                                    <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
+                                </el-upload>
                             </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="price" label="8月订单数" sortable></el-table-column>
-                    <el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
-                        :filter-method="filterHandler">
-                    </el-table-column>
-                    <el-table-column prop="status" label="状态" width="195"></el-table-column>
-                    <!-- <el-table-column fixed="right" label="操作" width="182">
-                    <template slot-scope="scope">
-                        <div class="flex">
-                            <el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
-                            <el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
-                        </div>
-                    </template>
-                </el-table-column> -->
-                </el-table>
-                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
-                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
-                    :total="tableData.length">
-                </el-pagination>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
+        </div>
+        <div class="siteMessage flex-common" id="siteMessage2">
+            <h3>个人介绍</h3>
+            <el-form :model="siteForm" ref="siteForm1">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipInput column="column" v-model="siteForm.doctor_desc" prop="doctor_desc" label="一句话介绍"
+                            width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit />
+                            <GuipTextarea label="详细介绍" column="column" v-model="siteForm.doctor_detail" prop="doctor_detail"
+                                width="100%" autosize placeholder="请输入描述内容" maxlength="不限"
+                                show-word-limit />
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <GuipSelect column="column" label="个人标签" desc="展示给患者，体现您的专业性" v-model="siteForm.label" multiple
+                            :options="options_payword" placeholder="点击选择">
+                        </GuipSelect>
+                    </div>
+                </div>
             </el-form>
+            <GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="submitForm('siteForm1')" />
         </div>
     </div>
 </template>
 <script>
-// import request from "./utils/request";
-import GuipSelect from '@/components/GuipSelect.vue'
+import { mapState } from 'vuex';
+import HoverButton from '@/components/HoverButton.vue';
+import GuipFormItem from '@/components/GuipFormItem.vue';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+import GuipSelect from '@/components/GuipSelect.vue';
+import GuipRadio from '@/components/GuipRadio.vue';
 export default {
     // 站点设置
     name: '',
     props: [''],
     components: {
+        HoverButton,
+        GuipFormItem,
+        GuipRadio,
+        GuipInput,
         GuipSelect,
-        // GuipSelectFilter,
+        GuipTextarea,
+        GroupFormBtns
+
     },
     data() {
         return {
-            phoneService: [
-                {
-                    text: '不限',
-                    value: '0'
-                },
-                {
-                    text: 'H5',
-                    value: '1'
-                },
-                {
-                    text: '小程序',
-                    value: '2'
-                },
-                {
-                    text: 'H5以及小程序',
-                    value: '3'
-                },
-            ],
-            currentPage: 1,    //当前页
-            pageSize: 2,   //每页的容量
-            total: 0,   //列表总数
-            options_payword: [
-                {
-                    label: '按篇', value: '0'
-                },
-                {
-                    label: '按字符', value: '1'
-                },
+            doctorId: '',
+            fileList: [
+                // { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
             ],
-            options: [
-                { label: '选项1', value: '1' },
-                { label: '选项2', value: '2' },
-                { label: '选项3', value: '3' },
-                // 更多选项...
+            options_payword: [{
+                value: '选项1',
+                label: '黄金糕'
+            }, {
+                value: '选项2',
+                label: '双皮奶'
+            }, {
+                value: '选项3',
+                label: '蚵仔煎'
+            }, {
+                value: '选项4',
+                label: '龙须面'
+            }, {
+                value: '选项5',
+                label: '北京烤鸭'
+            }],
+            groupOptions: [
+                { label: '需审批', value: '1' },
+                { label: '不需审批', value: '2' },
             ],
-            filteredOptions: this.options,
-
-            phoneServicelist:
-            {
-                0: '不限',
-                1: ' H5',
-                2: '小程序',
-                3: '无手机服务'
-
+            formData: null,
+            siteForm: {
+                doctor_name: '',
+                idcard: '',
+                phone: '',
+                avator: '',
+                doctor_desc: '',
+                doctor_detail: '',
+                label: '',
+                first_visit_audit:'1',
+                approve_phone:''
             },
-            tableData: [
-                {
-                    name: '哈哈哈',
-                    link: 'http://www.chachongz.com',
-                    registerDate: '2025.02.18',
-                    group: '1',
-                    phoneService: '1',
-                    status: '1',//配置中中
-                    price: 10,
-                    count: 23432,
-                    percentage: '2.5'
-
-                },
-                {
-                    name: '知网学诚教育',
-                    link: 'http://new.checkcopy.com',
-                    registerDate: '2025.02.18',
-                    group: '2',
-                    phoneService: '2',
-                    status: '0',//运行中
-                    price: 20,
-                    count: 3432,
-                    percentage: '17.5'
-                },
-                {
-                    name: '哈哈哈111',
-                    link: 'http://www.chachongz.com',
-                    registerDate: '2025.02.18',
-                    group: '1',
-                    phoneService: '1',
-                    status: '1',//配置中中
-                    price: 10,
-                    count: 7868,
-                    percentage: '2.5'
-
-                },
-                {
-                    name: '知网学诚教育2222',
-                    link: 'http://new.checkcopy.com',
-                    registerDate: '2025.02.18',
-                    group: '2',
-                    phoneService: '2',
-                    status: '0',//运行中
-                    price: 20,
-                    count: 32432,
-                    percentage: '17.5'
-                },
-            ],
-            form: {
-                payword: '0',
+            oldForm: {},
+            siteFormrules2: {
+                first_visit_audit: [
+                    { required: true, message: '请选择初诊审批设置', trigger: 'change'}
+                ]
+            },
+            siteFormrules: {
+                doctor_name: [
+                    { required: true, message: '请输入姓名', trigger: 'blur' }
+                ],
+                phone: [
+                    { required: true, message: '请输入手机号', trigger: 'blur' },
+                    {
+                        pattern: /^1[3-9]\d{9}$/,
+                        message: '请输入正确的手机号码',
+                        trigger: 'blur'
+                    }
+                ],
+                idcard: [
+                    { required: true, message: '请输入身份证号', trigger: 'blur' },
+                    {
+                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+                        message: '请输入正确的身份证号码',
+                        trigger: 'blur'
+                    }
+                ],
+                avator: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (!this.fileList.length && !this.siteForm.avator) {
+                                callback(new Error('请上传医生照片'));
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'change'
+                    }
+                ]
             }
         }
     },
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
     mounted() {
-        // this.ai2()
-        // this.$refs.scrollContainer.scrollTo(0)
+        const id = this.$route.query.id; // 获取 id 参数
+        this.doctorId = id;
+        if (id) {
+            // 请求医生信息
+            this.fetchDoctorData(id);
+        }
     },
     methods: {
-        // ai2() {
-        //     this.$http('POST', 'https://www.90616.com/ajax_get_ai_services').then(response => {
-        //         console.log(response, '000')
-        //     })
-        //     .catch(error => {
-        //         console.error(error, '22-----')
-        //     })
-        // },
-
-        // 列筛选
-        filterHandler(value, row, column) {
-            const property = column['property'];
-            if (value == 0) {
-                return row[property] != value
-            }
-            return row[property] === value;
+        fetchDoctorData(id) {
+            this.$http('POST', '/api/admin/get_doctor_baseinfo', {
+                did: id
+            }).then(response => {
+                if (response.code == 0) {
+                    let obj = JSON.parse(JSON.stringify(this.siteForm))
+                    this.oldForm = { ...obj,...response.data }
+                    this.siteForm = { ...this.siteForm,...response.data }
+                    if (response.data.avator) {
+                        this.fileList = [{
+                            name: 'avator',
+                            url: response.data.avator
+                        }];
+                    }
+                }
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        btnClick() {
         },
-        // 自定义搜索筛选
-        customFilter(keyword, options) {
-            if (!keyword) return options
-            return options.filter(item => {
-                // 自定义筛选逻辑
-                return item.label.includes(keyword) || item.value.includes(keyword)
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+        },
+        handlePreview(file) {
+            console.log(file);
+        },
+        radioChange(data) {
+            console.log(data, 'radio--data');
+        },
+        uploadAvatar() {
+            return new Promise((resolve) => {
+                if (this.fileList.length) {
+                    const formData = new FormData();
+                    formData.append('file', this.fileList[0].raw);
+                    this.$http.post('/api/upload', formData).then(res => {
+                        resolve(res.data.url);
+                    });
+                } else {
+                    resolve(this.siteForm.avator);
+                }
+            });
+        },
+        handleFileChange(file, fileList) {
+            console.log(file,fileList,'======file');
+            this.siteForm.avator = fileList.length ? 'uploaded' : '';
+            this.$refs.siteForm.validateField('avator');
+            this.fileList = fileList
+
+            // 创建FormData对象
+            this.formData = new FormData()
+            fileList.forEach(item => {
+                this.formData.append('files', item.raw)
             })
+
+            // 可以在这里添加其他表单数据
+            this.formData.append('extraParam', 'value')
         },
-        handleSizeChange(val) {
-            this.pageSize = val
+        // 上传图片
+        handleAvatarSuccess(res, file) {
+            this.imageUrl1 = URL.createObjectURL(file.raw);
         },
-        handleCurrentChange(val) {
-            this.currentPage = val
+        beforeAvatarUpload(file) {
+            console.log(file,'=====file');
+            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG) {
+                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+            }
+            if (!isLt2M) {
+                this.$message.error('上传头像图片大小不能超过 2MB!');
+            }
+            return isJPG && isLt2M;
         },
-        random() {
-            var randomNumber = Math.random();
-            return randomNumber
+        submitForm(form) {
+            let props= {};
+            if (form == 'siteForm') {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        props = {
+                            did: this.doctorId,
+                            name: this.siteForm.doctor_name,
+                            idcard: this.siteForm.idcard,
+                            avatar_file: this.siteForm.avator,
+                            phone: this.siteForm.phone
+                        }
+                    } else {
+                        return false;
+                    }
+                });
+            } else {
+                props = {
+                    did: this.doctorId,
+                    desc: form.doctor_desc,
+                    detail: form.doctor_detail,
+                    label: form.label
+                }
+            }
+            this.$http('POST', '/supernew/ajax_get_type_batch_list', props).then(response => {
+                if (response.code == 0) {
+                    this.$Message.success('修改成功')
+                }
+            }).catch(error => {
+                console.error(error, 'error')
+            })
         },
+        cancelClick(type) {
+            // siteForm
+            if (type == 'siteForm1') {
+                this.siteForm = {
+                    ...this.siteForm,
+                    doctor_desc: this.oldForm.doctor_desc,
+                    doctor_detail: this.oldForm.doctor_detail,
+                    label: this.oldForm.label,
+                }
+
+            } else {
+                this.siteForm = {
+                    ...this.siteForm,
+                    name: this.oldForm.name,
+                    idcard: this.oldForm.idcard,
+                    avatar_file: this.oldForm.avatar_file,
+                    phone: this.oldForm.phone
+                }
+            }
+        },
+        confirmClick(type) {
+            console.log(type, '确认');
+        }
+
     }
 }
 </script>
-<style scoped lang="scss">
-.demo-wrap {
+<style lang="scss">
+.siteMessage {
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
+.special-form-item {
+    .el-form-item__label{
+        margin-bottom: 12px;
+    }
+    .custom-label{
+        gap: 6px;
+    }
+}
+
+.addStore {
+    margin-top: 12px;
+}
+
+.qqCode-wrap {
+    margin-bottom: 14px;
+    display: flex;
     width: 100%;
-    letter-spacing: 0.08em;
+    justify-content: flex-start;
+    .labelImg {
+        opacity: .7;
+        margin-left: 8px;
+    }
+
+    .avatar-uploader {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .avatar-desc {
+        text-align: left;
+    }
+}
+
+
+.site-setting-wrap {
+    width: 100%;
+}
+
+#siteMessage2 {
+    margin: 12px 0;
+}
+
+.domain-wrap {
+    .domain-item {
+        margin-bottom: 10px;
+    }
+
+
+    .domain-item p:last-child {
+        padding-left: 23px;
+        color: #8A9099;
+    }
+
+    p {
+        text-align: left;
+        line-height: 18px;
+        margin-bottom: 8px;
+    }
+
+    .domain-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 97c95a5..a2835b2 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -126,6 +126,12 @@
                     <label for="">文本域：自适应高度</label>
                     <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
                 </div>
+                <div class="ele-item">
+                    <label for="">文本域：自定义label、描述</label>
+                    <GuipTextarea label="详细介绍" column="column" prop="doctor_detail"
+                                width="400px" height="90px" placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" 
+                                show-word-limit />
+                </div>
 
                 <div class="ele-item">
                     <label for="">输入框：</label>