rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/sampleManagement/technicalSpecificationDetail/com_bm_demoSlot.vue

<template>
  <div class="mod-config">
    <el-form  :inline="true" label-position="top" label-width="100px"  style="margin-top: 1px; margin-left: 0px;" >
      <el-form-item :label="'技术参数卡编码'">
        <el-input v-model="searchData.codeNo" readonly style="width: 150px"  ></el-input>
      </el-form-item>
      <el-form-item :label="'属性模板编码'">
        <el-input v-model="searchData.propertiesCodeNo" readonly style="width: 150px"  ></el-input>
      </el-form-item>
      <el-form-item  label=" ">
        <el-button type="primary" @click="refreshBMPageModal()" v-if="!ifDisableFlag">更新模板</el-button>
        <el-button type="primary" @click="searchTable()" >刷新数据</el-button>
        <el-button type="primary" @click="saveTable()" v-if="!ifDisableFlag">保存数据</el-button>
      </el-form-item>
      <div class="rq ">
        <el-table
          :height="height"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="propertiesItemNo"
            header-align="center"
            align="left"
            width="150"
            label="属性编码">
          </el-table-column>
          <el-table-column
            prop="itemDesc"
            header-align="center"
            align="left"
            width="150"
            label="属性名称">
          </el-table-column>
          <el-table-column
            prop="valueTypeDb"
            header-align="center"
            align="center"
            width="80"
            label="数据类型">
            <template slot-scope="scope">
              <span v-if="scope.row.valueTypeDb === 'N'">数字</span>
              <span v-else-if="scope.row.valueTypeDb === 'T'">文本</span>
<!--              <a v-else-if="scope.row.valueTypeDb === 'S'" @click="openNewPage(scope.row.textValue)" >超链接</a>-->
              <a v-else-if="scope.row.valueTypeDb === 'S'" @click="openNewPage(scope.row.textValue)" >超链接</a>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="left"
            min-width="400"
            label="值">
            <template slot-scope="scope">
              <el-input v-if="scope.row.valueTypeDb === 'T'&&scope.row.valueChooseFlag === 'N'" v-model="scope.row.textValue" style="height: 11px;padding: 0px ;width:98%" allow-create></el-input>
              <div v-if="scope.row.valueTypeDb === 'S'&&scope.row.valueChooseFlag === 'N'"><el-input  v-model="scope.row.textValue" style="height: 11px;padding: 0px ;width:98%" allow-create></el-input></div>
              <el-input v-if="scope.row.valueTypeDb === 'N'&&scope.row.valueChooseFlag === 'N'" v-model="scope.row.numValue" type="number" style="height: 11px;padding: 0px;width:98%"  allow-create></el-input>
              <el-select v-if="scope.row.valueTypeDb === 'T'&&scope.row.valueChooseFlag === 'Y'" v-model="scope.row.textValue" placeholder="请选择" style="height: 11px;padding: 0px " allow-create>
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select>
              <el-select v-if="scope.row.valueTypeDb === 'N'&&scope.row.valueChooseFlag === 'Y'" v-model="scope.row.numValue" placeholder="请选择" style="height: 11px;padding: 0px " allow-create>
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select>
              <div v-if="scope.row.valueTypeDb === 'S'&&scope.row.valueChooseFlag === 'Y'"> <el-select v-model="scope.row.textValue" placeholder="请选择" style="height: 11px;padding: 0px ;width:98%" allow-create>
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select></div>

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

  </div>
</template>

<script>
  import {
    searchBMPropertiesValue,
    saveBMPropertiesValue,
    refreshBMPageModal,
    searchBMPropertiesHeaderForBM,
    checkUrl,
  } from "@/api/sampleManagement/technicalSpecificationList.js"

  export default {
    components: {

    },

    data() {
      return {
        height:200,
        searchData: {
          site: '',
          username: this.$store.state.user.name,
          codeNo: '',
          buNo:'',
          type:'',
          propertiesCodeNo:'',
        },
        type:'prepress',
        ifDisableFlag:false,
        tableData:[],
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height =0.7* window.innerHeight
      })
    },
    methods: {
      //初始化组件的参数
      init(inData) {
        if(this.searchData.codeNo!=null&&this.searchData.codeNo!=''){
          return false;
        }
        //初始化参数
        this.searchData = JSON.parse(JSON.stringify(inData));
        if(this.searchData.ifDisableFlag){
          this.ifDisableFlag=true
        }
        //this.searchData.type= JSON.parse(JSON.stringify(this.type));
        //刷新表格
        this.$nextTick(()=>{
          this.searchTable();
        } )


      },
      searchTable(){
        searchBMPropertiesValue(this.searchData).then(({data}) => {
          this.tableData = data.rows;
        });
        searchBMPropertiesHeaderForBM(this.searchData).then(({data}) => {
            // this.searchData.propertiesCodeNo = data.row.propertiesCodeNo;
          this.$set(this.searchData, 'propertiesCodeNo', data.row.propertiesCodeNo);
        });
      },
      refreshBMPageModal(){
        this.$confirm(`是否刷新至最新模板界面，已填数据会更新到新模板中，若旧属性在新模板中被删除，该条数据会消失。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          refreshBMPageModal(this.searchData).then(({data}) => {
            if (data && data.code === 0) {
              this.searchTable();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },
      saveTable(){
        saveBMPropertiesValue(this.tableData).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
              }
            })
            this.$emit("closeModel")
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        });
      },
      openNewPage(url){
        // window.open(this.$store.state.user.bmPicUrl +url);
        if(url==null||url===''){
          this.$alert("链接没有数据！", '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }

        let data={
          url:url
        }
        checkUrl(data).then(({data}) => {
          if (data && data.code === 0) {
            window.open(data.url);
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        });

      },
    },
  }
</script>

<style scoped>

</style>