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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<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',
    props: ['pageId'], // 声明接收的 props
    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":"Fcgdma2cofgiazc","title":"表格","$required":false,"props":{"addZkqyTableRow":144,"updateZkqyTableRow":145,"pageId":146},"columns":[{"tableName":"stu","tableType":"primary","columnName":"主键","showValue":"id","searchValue":"stu@id"},{"tableName":"stu","tableType":"primary","columnName":"名称","showValue":"name","searchValue":"stu@name"},{"tableName":"stu","tableType":"primary","columnName":"老师id","showValue":"teacher_id","searchValue":"stu@teacher_id"},{"tableName":"stu","tableType":"primary","columnName":"习惯集合","showValue":"habbit_collection","searchValue":"stu@habbit_collection"},{"tableName":"stu","tableType":"primary","columnName":"树id","showValue":"tree_id","searchValue":"stu@tree_id"},{"tableName":"stu","tableType":"primary","columnName":"性别","showValue":"sex","searchValue":"stu@sex"},{"tableName":"stu","tableType":"primary","columnName":"树id2","showValue":"tree_id_two","searchValue":"stu@tree_id_two"},{"tableName":"stu","tableType":"primary","columnName":"穿梭框id集合","showValue":"el_transfer_id","searchValue":"stu@el_transfer_id"},{"tableName":"cls","tableType":"sub","primaryKey":"cls_id","subKey":"id","columnName":"课程名","showValue":"name","searchValue":"cls@name"}],"_fc_id":"id_Fwqsma2cofgib0c","name":"ref_Fk8ema2cofgib1c","display":true,"hidden":false,"_fc_drag_tag":"zkqyTable"}],
            tableData: [],
            columns: [{"prop":"stu@id","label":"主键"},{"prop":"stu@name","label":"名称"},{"prop":"stu@teacher_id","label":"老师id"},{"prop":"stu@habbit_collection","label":"习惯集合"},{"prop":"stu@tree_id","label":"树id"},{"prop":"stu@sex","label":"性别"},{"prop":"stu@tree_id_two","label":"树id2"},{"prop":"stu@el_transfer_id","label":"穿梭框id集合"},{"prop":"cls@name","label":"课程名"}],
            radio: '',
            policyData: {},
            currentPage4: 1,
            tableList: [{
                pageId: '',
                total: 0,
                pageSize: 2,
                pageNum: 1
            }],
            baseUrl: 'http://192.168.10.103:8088/',
            headers: {
                Accept: 'application/json',
                dbname:'tt18',
                '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;
            let zj = this.zkqyTablePageJson[0].columns.find(item=>item.tableType=="primary")
            if(zj.tableName){
                let v = zj.tableName+'@id'
                  searchId = this.radio[v]
            }
            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,
                pageId: this.pageId 
            });
        },
        handleCurrentChange(val) {
            this.tableList[0].pageNum = val;
            this.getTableLimitInfo({ 
                pageNum: this.tableList[0].pageNum, 
                pageSize: this.tableList[0].pageSize,
                pageId: this.pageId 
            });
        },
        handleDelete(index, row) {
            // console.log(row)
            // let zj = this.zkqyTablePageJson[0].columns.find(item=>item.tableType=="primary")
            // if(zj.tableName){
            //     let v = zj.tableName+'@id'
            //       searchId = this.radio[v]
            // }
            let id = this.zkqyTablePageJson[0]?.columns[0]?.tableName +'@id'
            this.$msgbox.confirm('确认删除id为' + row[id] + '这行数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1);
                this.deleteTableData(row[id], this.pageId );
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
        async deleteTableData(lineId, pageId) {
             const endpoint = 'api/mobilePageDesignData/normal/deleteData';
             try {
               const url = this.baseUrl + endpoint;
                 const requestBody = {
                     lineId: lineId,
                     pageId: pageId
                 };
                 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 {pageId,pageNum,pageSize} =this.tableList[0]
                     // 删除成功后刷新表格数据
                     this.getTableLimitInfo({pageId,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 = 'api/mobilePageDesignData/muti/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 ={}
            
            let pageId = this.pageId
            console.log('pageId',pageId)
            const endpoint = 'api/mobilePageDesignData/queryMobileClickAddData/'+ formId;
            await this.fetchGet(endpoint , params,(data) => {
                if (data.code === 200) {
                    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);
                    // 将 pageId 存储到 localStorage
                    localStorage.setItem('sharedPageId', pageId);   
                }
            });
        },
        async queryMobileClickUpdateData(params = {}) {
            let formId = params.formId;
            let searchId = params.searchId;
            params = {}
            // 移除指定的 localStorage 键
            // localStorage.removeItem('sharedPageId');

            const endpoint = 'api/mobilePageDesignData/queryMobileClickUpdateData/'+this.pageId +'/'+formId +'/'+searchId;
            await this.fetchGet(endpoint , params,(data) => {
                if (data.code === 200) {
                        const decodedHtml = decodeURIComponent(data.data.htmlData);
                        const iframe = document.createElement('iframe');
                        iframe.srcdoc = decodedHtml;
                        iframe.style.width = '100%';
                        iframe.style.height = '100vh';
                        iframe.style.border = 'none';
                        document.body.innerHTML = '';
                        document.body.appendChild(iframe);
                        // 将 pageId 存储到 localStorage
                        localStorage.setItem('sharedPageId', this.pageId);   
                    }
            });
        },
        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() {
        console.log('父组件传递的 options:', this.pageId);
        this.tableList[0].pageId = this.pageId
        let { pageId, pageNum, pageSize } = this.tableList[0];
        this.getTableLimitInfo({ pageId, pageNum, pageSize });
    }
};

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

new Vue({
                el: '#app',
                data() {
                    return {
                        rule: formCreate.parseJson('[{"type":"zkqyTable","field":"Fcgdma2cofgiazc","title":"表格","$required":false,"props":{"addZkqyTableRow":144,"updateZkqyTableRow":145,"pageId":146},"columns":[{"tableName":"stu","tableType":"primary","columnName":"主键","showValue":"id","searchValue":"stu@id"},{"tableName":"stu","tableType":"primary","columnName":"名称","showValue":"name","searchValue":"stu@name"},{"tableName":"stu","tableType":"primary","columnName":"老师id","showValue":"teacher_id","searchValue":"stu@teacher_id"},{"tableName":"stu","tableType":"primary","columnName":"习惯集合","showValue":"habbit_collection","searchValue":"stu@habbit_collection"},{"tableName":"stu","tableType":"primary","columnName":"树id","showValue":"tree_id","searchValue":"stu@tree_id"},{"tableName":"stu","tableType":"primary","columnName":"性别","showValue":"sex","searchValue":"stu@sex"},{"tableName":"stu","tableType":"primary","columnName":"树id2","showValue":"tree_id_two","searchValue":"stu@tree_id_two"},{"tableName":"stu","tableType":"primary","columnName":"穿梭框id集合","showValue":"el_transfer_id","searchValue":"stu@el_transfer_id"},{"tableName":"cls","tableType":"sub","primaryKey":"cls_id","subKey":"id","columnName":"课程名","showValue":"name","searchValue":"cls@name"}],"_fc_id":"id_Fwqsma2cofgib0c","name":"ref_Fk8ema2cofgib1c","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","formName":"表格1"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}'),
                        formData: {},
                        api: null,
                        zkqyData:[],
                        zkqyUpload:[],
                    };
                },
                methods: {
                    onSubmit(formData){
                        console.log('submit', formData);
                        
                    },
                    async zkqyDataApi(data,type,id){
                        let zkqyData = this.zkqyData;
                        if (!zkqyData || zkqyData.length === 0) return;
                        const headers = {
                            'Accept': 'application/json',
                            'dbname': 'undefined',
                            'Content-Type': 'application/json'
                        };
                        try {
                            let response;
                            if (type === 'cascader' || type === 'tree') {
                                // 调用树形接口 POST
                                const apiUrl = 'undefinedapi/mobilePageDesignData/tree';
                                console.log('调用树形接口:', apiUrl);
                                response = await fetch(apiUrl, {
                                    method: 'POST',
                                    headers,
                                    body: JSON.stringify(data)
                                });
                            } else {
                                // 调用下拉框接口 GET
                                let x = new URLSearchParams(data).toString()
                                const apiUrl = 'undefinedapi/mobilePageDesignData/dropdown?'+x;
                                console.log('调用下拉框接口:', apiUrl);
                                response = await fetch(apiUrl, {
                                    method: 'GET',
                                    headers
                                });
                            }
                
                            if (!response.ok) {
                                throw new Error('HTTP error! status:response.status');
                            }
                            const result = await response.json();
                            const targetRule = this.rule.find(item => item._fc_id === id);
                              if (type === 'tree') {
                                 this.$set(targetRule?.props, 'data', result.data);
                              }
                              else if(type === 'cascader'){
                                this.$set(targetRule.props, 'options', result.data);

                              }else if(type === 'elTransfer'){
                                this.$set(targetRule.props, 'data', result.data);
                              }else {
                                this.$set(targetRule, 'options', result.data);
                              }
                              this.rule =formCreate.parseJson(formCreate.toJson([...this.rule])); // 触发重新渲染
                          
                              return result;
                            
                        } catch (error) {
                            console.error('type接口请求失败:', error);
                            throw error;
                        }
                    },
                    transformTreeToSingleObject(node) {
                        if (!node) return node;
                        
                        // 创建新对象，避免修改原对象
                        const newNode = {...node};
                        
                        // 处理 childrenTree
                        if (Array.isArray(newNode.childrenTree) ){
                          if (newNode.childrenTree.length > 0) {
                            // 取第一个元素作为对象
                            newNode.childrenTree = this.transformTreeToSingleObject(newNode.childrenTree[0]);
                          } else {
                            // 空数组转为 null 或 undefined
                            newNode.childrenTree = null;
                          }
                        } else if (newNode.childrenTree) {
                          // 如果不是数组但存在 childrenTree，递归处理
                          newNode.childrenTree = this.transformTreeToSingleObject(newNode.childrenTree);
                        }
                        
                        return newNode;
                      },
                },
                mounted() {
                    this.rule.forEach(ruleItem => {
                        if(ruleItem.type=="upload"){
                          console.log('ruleItem',ruleItem)
                          console.log('this.rule ',this.rule )
                          if(ruleItem?.value.length>0){
                            const processedUrl = 'undefined'.endsWith('/') ?'undefined'.slice(0, -1) : 'undefined'; // 如果 url 最后一个字符是斜杠，则去掉它
                            console.log('processedUrl',processedUrl)
                            ruleItem.value = ruleItem.value.map(
                                item => processedUrl+item
                              );
                          }
                          console.log(' ruleItem.value ', ruleItem.value  )

                        //   this.rule =formCreate.parseJson(formCreate.toJson([...this.rule])); // 触发重新渲染
                          ruleItem.props.onSuccess="[[FORM-CREATE-PREFIX-function onSuccess(res, file){const key='upload_row';const existingData=sessionStorage.getItem(key);let fileList=existingData?JSON.parse(existingData):[];if(!Array.isArray(fileList)){fileList=[];}const newItem={fileName: file.response.fileName, url: file.url};fileList.push(newItem);sessionStorage.setItem(key,JSON.stringify(fileList));}-FORM-CREATE-SUFFIX]]"
                        }
                      })
                    let zkqyData = this.zkqyData
                    if(zkqyData && zkqyData.length>0){
                        console.log('[this.rule]',this.rule)
                        this.rule.forEach(ruleItem => {
                        const matchedData = zkqyData.find(dataItem => dataItem._fc_id === ruleItem._fc_id);
                        if (matchedData) {
                            if (matchedData?.type !== 'cascader' && matchedData?.type !== 'tree') {
                                resultObj = {
                                    tableName: matchedData?.parentNode?.tableName,
                                    valueName: matchedData?.parentNode?.primaryIdField,
                                    labelName: matchedData?.parentNode?.showValue,
                                    type: matchedData?.type
                                };
                                this.zkqyDataApi(resultObj,matchedData?.type,matchedData._fc_id)
                            } 
                            else {
                                resultObj = this.transformTreeToSingleObject(matchedData.parentNode);
                                resultObj.componentType = matchedData?.type
                                this.zkqyDataApi(resultObj,matchedData?.type,matchedData._fc_id)
                            }
                    }
                })
            }},
            })
        </script>
    </body>
</html>