CfgSupply.vue

<template>
    <div class="ams-dialog">
        <el-dialog 
        v-model="isShow" 
        :close-on-click-modal="false" 
        :close-on-press-escape="false" 
        :width="width"
        :fullscreen="fullscreen" 
        :draggable="true" 
        :before-close="onSureClick" 
        @open="handleExpandChange">
            <template #header>
                <div style="display: flex;">
                    <el-icon ><setting /></el-icon>
                    <div style=" padding-left: 10px;height: 100%;">{{ title }}</div>
                    <button class="el-dialog__headerbtn" type="button" style="right: 35px; color: var(--el-color-info)" @click="handleFullScreen">
                        <el-icon><FullScreen /></el-icon>
                    </button>
                </div>
            </template>
            <el-table 
                ref="tableRef"
                show-header="true" 
                :data="titleData" 
                :max-height="contentHeight"
                :default-checked-keys="defaultCheckedKeys"
                @selection-change="handleSelectionChange"
                >
                <el-table-column show-overflow-tooltip type="selection" width="55px"></el-table-column>
                <el-table-column label="参数名" prop="cnName" minWidth="200px" show-overflow-tooltip />
                <el-table-column label="别名" prop="alias" minWidth="200px" show-overflow-tooltip >
                  <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.alias"></el-input>
                    <span v-else>{{ scope.row.alias }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="cfgType != 2" label="背景色" prop="backColor" width="100px" show-overflow-tooltip>
                  <template #default="scope">
                    <div v-if="activeIndex == scope.$index">
                      <el-color-picker v-model="scope.row.backColor"></el-color-picker>
                    </div>
                    <span v-else :style="{backgroundColor: scope.row.backColor, color: scope.row.backColor}" style="width: 100px; height: 10px;">{{ scope.row.backColor }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="cfgType != 2" label="小数点位数" prop="decimalPoint" show-overflow-tooltip >
                  <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.decimalPoint"></el-input>
                    <span v-else>{{ scope.row.decimalPoint }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="cfgType != 1" label="列宽" prop="width" show-overflow-tooltip width="65px">
                  <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.width"></el-input>
                    <span v-else>{{ scope.row.width }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="排序" prop="orderNum" show-overflow-tooltip width="65px">
                  <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.orderNum"></el-input>
                    <span v-else>{{ scope.row.orderNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="right" width="150" lable="编辑">
                  <template #default="scope">
                      <div v-if="activeIndex == scope.$index">
                          <el-button type="info" @click="handleSave(scope.row)">保存</el-button>
                          <el-button type="danger" @click="handleCancle(scope.$index)">取消</el-button>
                      </div>
                      <div v-else>
                          <el-button type="success" @click="handleEdit(scope.$index)">编辑</el-button>
                      </div>
                  </template>
              </el-table-column>
            </el-table>
            <template #footer>
                <div class="dia-footer">
                    <slot name="footer"></slot>
                    <!-- <el-button type="primary" size="mini" @click="onSaveClick()" icon="finished">
                       提交
                    </el-button> -->
                    <el-button type="primary" size="mini" @click="onSureClick()" icon="close">
                       关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>

import { nextTick, ref, watch, reactive, defineEmits } from 'vue'
import store from "@/store/index";
import http from '@/api/http'
import { ElNotification } from 'element-plus';

const props = defineProps(['cfgType','deviceType', 'titleData','modelValue', 'title','height','width']);
const emits = defineEmits(['update:modelValue'],['onChangeDialog']);
const isShow = ref(false);
isShow.value = props.modelValue;
const tableRef = ref([]);
const selectedRows = ref([]);
const activeIndex = ref(-1);
var cfgSupply=reactive({cfgType: 0, enterpriseId:'',baseId:0,deviceType:1,alias:'',backColor:'',decimalPoint:0,width:80,orderNum:1,isVisible:0});
const top = ref(100);
const clientHeight = document.body.clientHeight * 0.95 - 60;
const contentHeight = ref(200);
contentHeight.value = props.height;
const defaultCheckedKeys = ref(null);
const calcHeight = (val) => {
    contentHeight.value = clientHeight - 30;
    return clientHeight / -2 + 'px';
};
// const cfgType = ref(0);
top.value = calcHeight();
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
      isShow.value = newVal;
  }
);
watch(
  () => props.titleData,
  (newVal, oldVal) => {
    // if(newVal){
    //   selectRow.value = props.titleData.filter((row)=> row.isVisible);
    // }
  }, { immediate: true, deep: true }
);

const handleExpandChange = ()=>{
  console.log("cfgtype:" + props.cfgType);
  if(!props.cfgType){
    props.cfgType = 0;
  }

  if(tableRef.value){
    props.titleData.forEach(row => {
        //console.log(row);
        if(!row.backColor.includes('#'))
          row.backColor = '#'+row.backColor;
        if(row.isVisible){
          tableRef.value.toggleRowSelection(row);
        }
      });
  }
}

// const onSaveClick=()=>{

// }
const onSureClick = (val) =>{
    isShow.value = false;
    emits('onChangeDialog', true);
}

const fullscreen=ref(false);
const handleFullScreen=()=> {
    fullscreen.value = !fullscreen.value;
    emits("fullscreen", fullscreen.value);
}

// 编辑行
const handleEdit = (index) => {
    activeIndex.value = index;
};
// 取消编辑
const handleCancle = (index)=>{
  activeIndex.value = -1;
}
// 选中行改变
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
// 保存行
const handleSave = (row) => {
  try{
    const isSelected = selectedRows.value.includes(row);
    activeIndex.value = -1;
    cfgSupply.cfgType = props.cfgType;
    cfgSupply.alias = row.alias;
    cfgSupply.enterpriseId = store.getters.getEnterpriseId();
    cfgSupply.baseId = row.baseId;
    cfgSupply.decimalPoint = row.decimalPoint;
    cfgSupply.width =  row.width;
    cfgSupply.orderNum = row.orderNum;
    cfgSupply.isVisible = isSelected;
    cfgSupply.deviceType = props.deviceType;
    const color = row.backColor;
    cfgSupply.backColor = color.replace('#','');
    // console.log(cfgSupply);
    http.post('/api/para/SaveCfgTitle',cfgSupply).then((response) => {
      if(response.success){
          ElNotification({
          title: 'Success',
          message: '自定义列提交成功',
          type: 'success',
          position: 'bottom-right',
          duration:3000
        })
      }else{
        ElNotification({
          title: 'Fail',
          message: '自定义列提交失败！' + response.message,
          type: 'error',
          position: 'bottom-right',
          duration:3000
        })
      }
    });
  }catch(error){
    ElNotification({
      title: '异常',
      message: '自定义列提交失败！' + error.message,
      type: 'warning',
      position: 'bottom-left',
      duration:3000
    })
  }
};

</script>

<style lang="less" scoped>
.dia-footer {
  text-align: right;
  width: 100%;
  border-top: 1px solid #e2e2e2;
  padding: 6px 2px;
  height: 15px;
}
</style>
<style scoped lang="less">
.ams-dialog ::v-deep(.el-overlay-dialog) {
  display: flex !important;
}

.ams-dialog ::v-deep(.el-dialog) {
  margin: auto;
}

.ams-dialog ::v-deep(.el-dialog) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.ams-dialog ::v-deep(.el-dialog__header) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
 // padding: 0px 13px;
  //line-height: 43px;
  border-bottom: 1px solid #e6e6e6;
  height: 10px;
  color: rgb(79, 79, 79);
  font-weight: bold;
  font-size: 15px;
  margin: 0;
  vertical-align: middle;
}

.ams-dialog ::v-deep(.el-dialog__footer),
.ams-dialog ::v-deep(.el-dialog__body) {
  padding: 0;
}

.ams-dialog ::v-deep(.el-dialog__headerbtn) {
  top: 0;
  padding-top: 8px;
  height: 20px;
  width: 0;
  padding-right: 30px;
  padding-left: 5px;
}
.ams-dialog ::v-deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #f00;
}

/*  
// 表格部分样式
 // 最外层透明 */
 ::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: #e6e6e6;
  font-size: 14px;
  color: #000;
}
 
/* 表格内背景颜色  */
::v-deep .el-table th{
  background-color: #fff;
  font-weight:bold;
  font-size: 15px;
}
::v-deep .el-table td {
  background-color: #f4f1f1fd;
  border: 0px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
  color: #000;
}
</style>