| | |
| | | --> |
| | | <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> |
| | |
| | | </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(){ |
| | |
| | | this.gitProduct(); |
| | | }, |
| | | components: { |
| | | saveDialog |
| | | saveDialog,saveSelectDialog,saveExtendDialog |
| | | }, |
| | | methods: { |
| | | gitProduct() { |
| | |
| | | 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 || []; |
| | | } |
| | | |
| | | } |
| | | }) |
| | | }, |
| | |
| | | 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(); |
| | | } |
| | | } |
| | | } |