新增文件

gaoshp

2024-06-13 fd7586c8d91473d2850af1e48b12f1a289e6b8d1

 src/views/configuration/custom/planSettings.vue

@@ -2,13 +2,13 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-30 18:04:52
 * @LastEditTime: 2024-05-30 18:17:23
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <div class="aposcope-main">
      <div class="header">
      <div class="header" v-if="$route.query.type == 1">
         <div class="title">计划显示设置</div>
         <div class="type">
            <div class="item last" @click="openPlan">新建计划类型模版</div>
@@ -18,75 +18,125 @@
                  <template #reference>...</template>
                  <template #default>
                     <span class="popvoer-title" @click="table_edit(item,index)">编辑</span>
                     <span  class="popvoer-title" style="margin-left: 12px" v-if="index != 0">删除</span>
                     <span  class="popvoer-title" style="margin-left: 12px" v-if="index != 0" @click="del_tab(item)">删除</span>
                  </template>
               </el-popover>
            </div>
         </div>
      </div>
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
         <el-tab-pane label="新建页设置" name="first">
            <div>
               <div class="add-field">+ 添加字段</div>
               <div class="add-field" @click="openSelect">+ 添加字段</div>
               <div class="field-title">基础字段</div>
               <el-table ref="multipleTableRef" :data="tableData0" border style="width: 100%" class="multipleTableRef">
                  <el-table-column prop="fieldName" label="字段名"></el-table-column>
                  <el-table-column prop="fieldDescription" label="提示文字"></el-table-column>
                  <el-table-column prop="defaultValue" label="默认值"></el-table-column>
                  <el-table-column prop="mustField" label="是否必填"></el-table-column>
                  <el-table-column prop="mustField" label="是否必填">
                     <template #default="scope">
                        <span>{{scope.row.mustField == '1'?"是": "否"}}</span>
                     </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                     <template #default="scope">
                        <el-button text type="primary" :disabled="scope.row.systemFieldLabel == '是'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                        <el-button text type="primary" :disabled="scope.row.mustField == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     </template>
                  </el-table-column>
               </el-table>
               <div class="field-title">扩展字段</div>
               <el-table ref="multipleTableRef" :data="tableData0extend" border style="width: 100%" class="multipleTableRef">
                  <el-table-column prop="fieldName" label="字段名"></el-table-column>
                  <el-table-column prop="fieldDescription" label="提示文字"></el-table-column>
                  <el-table-column prop="defaultValue" label="默认值"></el-table-column>
                  <el-table-column prop="mustField" label="是否必填">
                     <template #default="scope">
                        <span>{{scope.row.mustField == '1'?"是": "否"}}</span>
                     </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                     <template #default="scope">
                        <el-button text type="primary" :disabled="scope.row.mustField == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     </template>
                  </el-table-column>
               </el-table>
            </div>
         </el-tab-pane>
         <el-tab-pane label="编辑页设置" name="second">
            <div class="add-field">+ 添加字段</div>
            <div class="add-field" @click="openSelect">+ 添加字段</div>
            <div class="field-title">基础字段</div>
            <el-table ref="multipleTableRef" :data="tableData1" border style="width: 100%" class="multipleTableRef">
               <el-table-column prop="fieldName" label="字段名"></el-table-column>
               <el-table-column prop="fieldDescription" label="支持编辑"></el-table-column>
               <el-table-column label="支持编辑" prop="supportUpdateLabel"></el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" :disabled="scope.row.systemFieldLabel == '是'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     <el-button text type="primary" :disabled="scope.row.mustField == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <div class="field-title">扩展字段</div>
            <el-table ref="multipleTableRef" :data="tableData1extend" border style="width: 100%" class="multipleTableRef">
               <el-table-column prop="fieldName" label="字段名"></el-table-column>
               <el-table-column prop="supportUpdateLabel" label="支持编辑"></el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" :disabled="scope.row.mustField == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
         </el-tab-pane>
         <el-tab-pane label="查看页设置" name="third">
            <div class="add-field" @click="openSelect">+ 添加字段</div>
            <div class="field-title">基础字段</div>
            <el-table ref="multipleTableRef" :data="tableData2" border style="width: 100%" class="multipleTableRef">
               <el-table-column prop="fieldName" label="字段名"></el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" :disabled="scope.row.systemFieldLabel == '是'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     <el-button text type="primary" :disabled="scope.row.sysFieldMust == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <div class="field-title">扩展字段</div>
            <el-table ref="multipleTableRef" :data="tableData2extend" border style="width: 100%" class="multipleTableRef">
               <el-table-column prop="fieldName" label="字段名"></el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" :disabled="scope.row.sysFieldMust == '1'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
         </el-tab-pane>
      </el-tabs>
   </div>
   <!-- 新建计划 -->
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="addPlanSuccess" @closed="dialog.save=false"></save-dialog>
   <!-- 添加字段 -->
   <save-select-dialog v-if="dialog.saveSelect" ref="saveSelectDialog" @success="addSelectSuccess" @closed="dialog.saveSelect=false" @addExtend="addExtend"></save-select-dialog>
   <!-- 添加扩展字段 -->
   <save-extend-dialog v-if="dialog.extendSave" ref="saveExtendDialog" @success="addExtendSuccess" @closed="dialog.save=false"></save-extend-dialog>
</template>
<script>
   import saveDialog from './addPlan'
   import saveSelectDialog from './saveSelectDialog'
   import saveExtendDialog from './addField'
   export default {
      name: "custom",
      data(){
         return {
            id: "",
            dialog: {
               save: false
               save: false,  //新增模版
               saveSelect: false,  //添加字段
               extendSave: false  //添加扩展字段
            },
            planData: [],
            activeName: "first",
            configType: 1,
            tableData0: [],
            tableData1: [],
            tableData2: []
            tableData2: [],
            tableData0extend: [],
            tableData1extend: []
         }
      },
      created(){
@@ -97,7 +147,7 @@
         this.gitProduct();
      },
      components: {
         saveDialog
         saveDialog,saveSelectDialog,saveExtendDialog
       },
      methods: {
         gitProduct() {
@@ -126,9 +176,19 @@
            this.getTableList();
         },
         getTableList() {
            this.$HTTP.get(`/api/blade-system/custom-template-field/listField?configType=1&templateId=${this.id}`).then(res=> {
            this.$HTTP.get(`/api/blade-system/custom-template-field/listField?configType=${this.configType}&templateId=${this.id}`).then(res=> {
               if(res.code == 200) {
                  this.tableData0 = res.data.systemFieldList;
                  if(this.activeName == "first") {
                     this.tableData0 = res.data.systemFieldList;
                     this.tableData0extend = res.data.customFieldList || [];
                  }else if(this.activeName == "second") {
                     this.tableData1 = res.data.systemFieldList;
                     this.tableData1extend = res.data.customFieldList || [];
                  }else if(this.activeName == "third") {
                     this.tableData2 = res.data.systemFieldList;
                     this.tableData2extend = res.data.customFieldList || [];
                  }
						
               }
            })
         },
@@ -138,20 +198,60 @@
               this.$refs.saveDialog.open(this.productList,this.planData,'edit').setData(row);
            })
         },
         del_tab(row) {
            this.$HTTP.delete(`/api/blade-system/custom-template/remove`,[row.id]).then(res=> {
               if(res.code == 200) {
                  this.$message.success("操作成功");
                  this.getBaseData();
               }
            })
         },
         openPlan() {
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open(this.productList,this.planData)
            })
         },
         openSelect() {
            this.dialog.saveSelect = true
            this.$HTTP.get(`/api/blade-system/custom-template-field/getSelectBox?configType=${this.configType}&templateId=${this.id}`).then(res=> {
               if(res.code == 200) {
                  this.$refs.saveSelectDialog.open(res.data,this.id,this.configType);
               }
            })
         },
         addPlanSuccess() {
            this.getBaseData();
         },
         table_del(row,index) {

         addSelectSuccess() {
            this.getTableList();
         },
         handleClick(text) {

         addExtendSuccess() {
            this.getTableList();
         },
         addExtend() {
            this.dialog.extendSave = true
            this.$nextTick(() => {
               this.$refs.saveExtendDialog.open();
            })
         },
         table_del(row,index) {
            this.$HTTP.delete(`/api/blade-system/custom-template-field-relation/remove`,[row.id]).then(res=> {
               if(res.code == 200) {
                  this.$message.success("操作成功");
                  this.getTableList();
               }
            })
         },
         handleClick(TabPaneName) {
            if(TabPaneName == "first") {
               this.configType = 1;
            }else if(TabPaneName == "second") {
               this.configType = 2;
            }else if(TabPaneName == "third") {
               this.configType = 3;
            }
            this.getTableList();
         }
      }
   }