|
|
@@ -1,442 +0,0 @@
|
|
|
-<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)">
|
|
|
-
|
|
|
- </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>
|
sql715