saber/src/views/manager/wbsinfo/parameter.vue

<template>
 <basic-container>
    <div class="pd-b-20 border-grey-b" style="text-align: right;">
        <el-button type="primary"icon="el-icon-add" size="small" @click="addCard">新增</el-button>
    </div>

    <div class="pd-t-20">
        <el-row :gutter="20" style="height: calc(100vh - 290px)" v-if="projectPageList.length > 0">
            <el-col  :span="6" v-for="(item, index) in projectPageList" :key="item.id">
                <el-card @click.native="handleSetParameterName(item)" class="box-card h-100p flex bg-color clickable" style="height: auto;">
                    <div class="card-content">
                    <h3>{{ item.paramName }}</h3>
                    <p class="text-bold">{{item.paramTypeName }}</p>
                    <p class="small-text">{{ item.remarks }}</p>
                
                    </div>
                </el-card>
            </el-col>
           
        </el-row>
        <div :span="24"  class="empty-data" v-else>
            <p>暂无参数信息</p>
        </div>
        <div>
        <el-pagination
        v-if="projectPageList.length > 0"
          layout="prev, pager, next"
          class="text-align-c"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :total="page.total"
          :page-size="page.pageSize"
        >
        </el-pagination>
      </div>
      </div>
      <!-- 新增弹窗 -->
         <paramDetail ref="paramDetailRef" :params="parameterRow" @finshDetail="finshDetail"></paramDetail>
          <!-- 新增弹窗 -->
        <addParamDialog :visible.sync="dialogVisible" @add-parameter="addCardFinish" />
 </basic-container>
</template>
<script>
import paramDetail from './paramDetail.vue';
import addParamDialog from './addParamDialog.vue';
import { queryParameterList } from "../../../api/paramter/parmter.js";

export default{
    components:{
        paramDetail,
        addParamDialog
    },
    data(){
        return{
            page:{
                currentPage: 1,
                pageSize: 12,
                total: 0
            },
            projectPageList:[],
            dialogVisible:false,
            parameter: {
                name: '',
                type: '',
                isProjectSpecific: false,
                remark: ''
            },
            rules: {
                name: [
                { required: true, message: '请输入参数名称', trigger: 'blur' }
                ],
                type: [
                { required: true, message: '请选择参数类型', trigger: 'change' }
                ],
                isProjectSpecific: [
                { type: 'boolean', required: true, message: '请选择是否区分项目', trigger: 'change' }
                ]
            },
            parameterRow:{}

        }
    },
    created(){
        this.getProjectPageList()
    },
    methods:{
        convertParamType(paramType) {
            if (!paramType) return '';
            return paramType.split(',').join('/');
        },
        getProjectPageList () {
            queryParameterList({
                current: this.page.currentPage,
                size: this.page.pageSize
            }).then((res) => {
                this.projectPageList = res.data.data.records;
                this.page.total = res.data.data.total;
            })
         },
        handleCurrentChange(){

        },
        delSetParameterName(item){
            console.log(item)
        },
        addCard(){
            console.log('新增')
            this.dialogVisible = true
        },
        addCardFinish(){
            
            this.getProjectPageList()
        },
        finshDetail(){
            console.log(1111111111111111);
            
            this.getProjectPageList()
        },
        handleSetParameterName(item){
            console.log(item)
            this.parameterRow = item
            this.dialogVisible = false
            this.$refs.paramDetailRef.show(item.id)
          
        }
    }
}
</script>
<style scoped lang="scss">
.bg-color {
  background-color: #F5F7FA;
}

.clickable {
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.small-text {
  font-size: smaller;
  margin-top: 20px;
  flex: 1;
}

.text-bold {
  font-weight: bold;
  height: 30px;
}

.delete-icon-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.delete-icon {
  font-size: 18px;
  color: red;
  cursor: pointer;
}

.empty-data {
  align-items: center;
  display: flex;
  justify-content: center;
  height: calc(-290px + 100vh);
}
</style>