scrq-hd/.svn/pristine/0e/0e6673e1d9b801faa12d6a15ffbaea3f06c3a7dc.svn-base

<template>
  <div class="app-container">
    <div>
      <el-page-header @back="returnPage" content='模板预览'/>
    </div>
    <el-form class="template_form" label-position="left">
      <el-row :gutter="24">
        <el-col :label-position="'right'" v-for="(details ,key) in templateDetails" :key="key"
                :span="details.type==1?8:23">
          <el-form-item v-if="details.type==1" :label="details.elementName" label-width="100px">
            <span v-if="details.elementType==1"></span>

            <!--            普通文本类型-->
            <el-input :maxlength="details.maxlength" :placeholder="details.placeholder"
                      v-else-if="details.elementType==2" style="width: 200px" show-word-limit></el-input>

            <!--            文本域-->
            <el-input :autosize="{ minRows: 1, maxRows: 4}" type="textarea" :maxlength="details.maxlength"
                      :placeholder="details.placeholder"
                      v-else-if="details.elementType==3" style="width: 200px" show-word-limit></el-input>
            <!--            数字类型-->
            <el-input-number
              v-else-if="details.elementType==4" style="width: 200px"></el-input-number>
            <!--            日期输入-->
            <el-date-picker
              v-else-if="details.elementType==5" style="width: 200px"></el-date-picker>
            <!--                日期时间输入-->
            <el-date-picker type="datetime"
                            v-else-if="details.elementType==6" style="width: 200px"></el-date-picker>

            <!--            下拉选择-->
            <el-select value="1" v-else-if="details.elementType==7" style="width: 200px">
              <el-option
                v-for="item in JSON.parse(details.options)"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>

            </el-select>
            <!--              单选按钮-->
            <el-radio-group v-if="details.elementType==8" style="width: 200px">
              <el-radio v-for="item in JSON.parse(details.options)"
                        :label="item.value">{{ item.label }}
              </el-radio>
            </el-radio-group>

            <el-checkbox-group v-model="details.id+''"  multiple v-else-if="details.elementType==9" style="width: 200px">
              <el-checkbox
                v-for="item in JSON.parse(details.options)"
                :key="item.value"

                :label="item.label"
                :value="item.value">
              </el-checkbox>

            </el-checkbox-group>
          </el-form-item>

          <!--          表格类型-->
          <el-form-item v-if="details.type==2">
            <el-table
              height="400"
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                v-for="(col,key) in tableCol"
                :key="key"
                align="center"
                :prop="col.field"
                :label="col.name"
                :formatter="formatter"
              >
              </el-table-column>

            </el-table>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'edit',

  props: {
    elementList: undefined,
    layerid: {
      type: String,
      default: ''
    },
    row: {},
    propThis: {}
  },
  mounted() {
    this.preview(this.row.id)
  },
  data() {
    return {
      templateDetails: [],
      form: {},
      tableData: [],
      tableCol: []
    }
  },
  methods: {
    formatter(row, column, cellValue, index) {
      for (let i=0;i<this.tableCol.length;i++){
        let el=this.tableCol[i];
        if (el.field==column.property){
          if (el.type==7||el.type==8|| el.type==9){
            let arry=JSON.parse(el.selectStaticValue);
            for (let j=0;j<arry.length;j++){
              if (arry[j].value==cellValue){
                return arry[j].name;
              }
            }
          }
        }
      }
      return cellValue;
    },
    returnPage() {
      this.propThis.pageFlag = 'query'
    },
    preview(id) {
      let param = {
        id
      }
      this.$QualityTemplate.templatePreView(param).then(resp => {

        this.templateDetails = resp.data.data.templateDetails

        this.templateDetails.forEach(value => {
          if (value.type == 2) {
            console.log("返回数据====",value)
            this.tableCol = value.list
            this.tableData = []
            value.detailsGrids.forEach(el => {
              this.tableData.push(JSON.parse(el.name))
            })
          }
        })
        console.log(this.tableData)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
  margin: 0px;

}

.template_form {
  margin-top: 1vw;
}

> > > .el-form-item__label {
  text-align: center;
}
</style>