zkqy-sass-platform
/
mec-cloud_-intelligent-manufacturing_crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <!-- Import style -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
        <!-- Import Vue 2.7 -->
        <script src="https://unpkg.com/vue@2"></script>
        <!-- Import element-ui -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- Import formCreate -->
        <script src="https://unpkg.com/@form-create/element-ui@super"></script>
    </head>
    <body>
        <div id="app">
            <form-create :rule="rule" :option="options" v-model:value="formData" v-model="api" @submit="onSubmit"></form-create>
        </div>
        <script>
            
// ====== 自定义代码开始 ======
var zkqyTable = {
    name: 'zkqyTable',
    template: `
    <div class="zkqy-table">
        <div class="table-container">
            <div class="zkqy-table-btn" style="margin-bottom: 10px;">
                <el-button type="primary" plain @click="add">新增</el-button>
                <el-button type="primary" plain @click="edit">修改</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" :fit="true" border>
                <el-table-column v-if="columns && columns.length > 0" :width="40">
                    <template slot-scope="scope">
                        <el-radio class="radio" 
                                 :label="scope.row" 
                                 v-model="radio" 
                                 @change.native="getCurrentRow(scope.row)">
                            &nbsp;
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column 
                    v-for="column in columns" 
                    :key="column.prop" 
                    :prop="column.prop" 
                    :label="column.label" 
                    :width="column.width"  
                    flex="1">
                </el-table-column>
                <el-table-column label="操作" width="120" align="center" v-if="columns && columns.length > 0">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableList[0].total">
            </el-pagination>
        </div>
    </div>
    `,
    data() {
        return {
            zkqyTablePageJson:[{"type":"zkqyTable","field":"Fn0cm9m5s49wbec","title":"表格","$required":false,"props":{"addZkqyTableRow":55,"updateZkqyTableRow":56},"columns":[{"columnName":"主键","showValue":"id"},{"columnName":"名称","showValue":"name"},{"columnName":"年龄","showValue":"age"},{"columnName":"习惯","showValue":"habit_name"},{"columnName":"课程id","showValue":"cls_id"}],"_fc_id":"id_Fosrm9m5s49wbfc","name":"ref_Ff7sm9m5s49wbgc","display":true,"hidden":false,"_fc_drag_tag":"zkqyTable"}],
            tableData: [],
            columns: [{"prop":"id","label":"主键"},{"prop":"name","label":"名称"},{"prop":"age","label":"年龄"},{"prop":"habit_name","label":"习惯"},{"prop":"cls_id","label":"课程id"}],
            radio: '',
            policyData: {},
            currentPage4: 1,
            tableList: [{
                tableName: 'stu',
                total: 0,
                pageSize: 2,
                pageNum: 1
            }],
            baseUrl: 'http://192.168.10.103:8088',
            headers: {
                Accept: 'application/json',
                Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImI1ODdhZjdkLTQ0ZGMtNGMyMS05MmViLTE5YjIyMmFmNGY2MSJ9.dFMXetyerkB9Mc6yFetO2cWg64TQeeMW1EOmNQgWpKXCFBVpKfy2YUZjMdIuFxt_PnT5QlEQErRCIpLKgiypgQ',
                'Content-Type': 'application/json'
            },
        };
    },
    methods: {
        // 方法实现...
        add() {
            let p = this.zkqyTablePageJson[0]?.props?.addZkqyTableRow
            if(p){
                this.queryMobileClickAddData(p)
            }
        },
        edit() {
            if (!this.radio) {
                this.$message.warning("请先选择一行数据");
                return;
            }
            let formId = this.zkqyTablePageJson[0]?.props?.updateZkqyTableRow
            let searchId = this.radio?.id
            if(!formId){
                this.$message.warning("请配置跳转页面");
                return
            }else if(!searchId) {
                this.$message.warning("id不存在");
            }else {
                let params = {
                    formId,
                    searchId 
                }
                this.queryMobileClickUpdateData(params)
            }
        },
        getCurrentRow(val) {
            this.policyData = val;
            console.log('this.policyData', this.policyData)
        },
        handleSizeChange(val) {
            this.tableList[0].pageSize = val;
            this.getTableLimitInfo({ 
                pageNum: this.tableList[0].pageNum, 
                pageSize: this.tableList[0].pageSize,
                tableName: this.tableList[0].tableName 
            });
        },
        handleCurrentChange(val) {
            this.tableList[0].pageNum = val;
            this.getTableLimitInfo({ 
                pageNum: this.tableList[0].pageNum, 
                pageSize: this.tableList[0].pageSize,
                tableName: this.tableList[0].tableName 
            });
        },
        handleDelete(index, row) {
            this.$msgbox.confirm('确认删除id为' + row.id + '这行数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1);
                let { tableName } = this.tableList[0];
                this.deleteTableData(row.id, tableName);
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
        async deleteTableData(lineId, tableName) {
             const endpoint = '/system/mobilePageDesignData/normal/deleteData';
             try {
               const url = this.baseUrl + endpoint;
                 const requestBody = {
                     lineId: lineId,
                     tableName: tableName
                 };
                 const response = await fetch(url, {
                     method: 'POST',
                     headers: this.headers,
                     body: JSON.stringify(requestBody) // 将参数转为JSON字符串
                 });
                 if (!response.ok) {
                       throw new Error('HTTP error! status: ' + response.status);
                   }
                 const result = await response.json();
                 console.log('删除结果:', result);
                 if (result.code == 200) {
                     this.$message.success('删除成功');
                     let {tableName,pageNum,pageSize} =this.tableList[0]
                     // 删除成功后刷新表格数据
                     this.getTableLimitInfo({tableName,pageNum,pageSize})
                     return true;
                 } else {
                     this.$message.error(result.message || '删除失败');
                     return false;
                 }
             } catch (error) {
                 console.error('删除数据出错:', error);
                 this.$message.error('删除请求失败: ' + error.message);
                 throw error;
             }
         },
         async getTableLimitInfo(params = {}) {
            const endpoint = '/system/mobilePageDesignData/tableLimitInfo';
            await this.fetchGet(endpoint, params, (data) => {
                if (data.code === 200) {
                    this.tableData = data.rows;
                    this.tableList[0].total = data.total
                } else {
                    console.warn('接口返回非 200 状态:', data);
                }
            });
        },
        async queryMobileClickAddData(params = {}) {
            let formId = params;
            params ={}
            const endpoint = '/system/mobilePageDesignData/queryMobileClickAddData/'+ formId;
            await this.fetchGet(endpoint , params,(data) => {
                if (data.code === 200) {
                    // let encodedHtml = data.data.htmlData;
                    // let decodedHtml = decodeURIComponent(encodedHtml);
                    // const newWindow = window.open(); // 打开一个新窗口
                    //     if (newWindow) {
                    //     newWindow.document.write(decodedHtml);
                    //     newWindow.document.close(); // 关闭文档流
                    // } else {
                    //     console.warn('接口返回非 200 状态:', data);
                    // }
                    const decodedHtml = decodeURIComponent(data.data.htmlData);
            
                    // 创建全屏 iframe
                    const iframe = document.createElement('iframe');
                    iframe.srcdoc = decodedHtml;
                    iframe.style.width = '100%';
                    iframe.style.height = '100vh';
                    iframe.style.border = 'none';
                    
                    // 清空页面并插入 iframe
                    document.body.innerHTML = '';
                    document.body.appendChild(iframe);
                }
            });
        },
        async queryMobileClickUpdateData(params = {}) {
            let formId = params.formId;
            let searchId = params.searchId;
            params = {}
            const endpoint = '/system/mobilePageDesignData/queryMobileClickUpdateData/'+formId +'/'+searchId;
            await this.fetchGet(endpoint , params,(data) => {
                if (data.code === 200) {
                    let encodedHtml = data.data.htmlData;
                    let decodedHtml = decodeURIComponent(encodedHtml);
                    const newWindow = window.open(); // 打开一个新窗口
                        if (newWindow) {
                        newWindow.document.write(decodedHtml);
                        newWindow.document.close(); // 关闭文档流
                    } else {
                        console.warn('接口返回非 200 状态:', data);
                    }
                }
            });
        },
        async fetchGet(endpoint, params = {}, successCallback) {
            try {
                // 构建查询字符串
                const queryString = Object.keys(params)
                    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
                    .join('&');
                // 拼接完整的 URL
                const url = this.baseUrl + endpoint + (queryString ? '?' + queryString : '');
        
                // 发起 GET 请求
                const response = await fetch(url, {
                    method: 'GET',
                    headers: this.headers
                });
        
                // 检查响应状态
                if (!response.ok) {
                    throw new Error('HTTP error! status: ' + response.status);
                }
        
                // 解析返回的数据
                const data = await response.json();
        
                // 调用成功回调函数
                if (successCallback && typeof successCallback === 'function') {
                    successCallback(data);
                }
            } catch (error) {
                console.error('调用接口出错:', error);
                throw error; // 抛出错误以便上层捕获
                }
            }
         },
    mounted() {
        let { tableName, pageNum, pageSize } = this.tableList[0];
        this.getTableLimitInfo({ tableName, pageNum, pageSize });
    }
};

// 注册组件
Vue.use(ELEMENT);
Vue.use(formCreate);
formCreate.component('zkqyTable', zkqyTable);

new Vue({
                el: '#app',
                data() {
                    return {
                        rule: formCreate.parseJson('[{"type":"zkqyTable","field":"Fn0cm9m5s49wbec","title":"表格","$required":false,"props":{"addZkqyTableRow":55,"updateZkqyTableRow":56},"columns":[{"columnName":"主键","showValue":"id"},{"columnName":"名称","showValue":"name"},{"columnName":"年龄","showValue":"age"},{"columnName":"习惯","showValue":"habit_name"},{"columnName":"课程id","showValue":"cls_id"}],"_fc_id":"id_Fosrm9m5s49wbfc","name":"ref_Ff7sm9m5s49wbgc","display":true,"hidden":false,"_fc_drag_tag":"zkqyTable"}]'),
                        options: formCreate.parseJson('{"form":{"inline":false,"hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false,"labelPosition":"right","labelWidth":"125px","validateOnRuleChange":false,"size":"small","formInDatabase":"stu","formName":"表格"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}'),
                        formData: {},
                        api: null,
                    };
                },
                methods: {
                    onSubmit(formData){
                        console.log('submit', formData);
                    }
                }
            })
        </script>
    </body>
</html>