kd-aiot-frontend-eom/src/views/marketManagem/components/souvenirList.vue

<template>
  <div>
    <el-form ref="form">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="tableList"
        :needPage="false"
        :minHeight="100"
        tool-class="ele-toolbar-form"
        cache-key="eomContactPageTable"
        :summary-method="getSummaries"
        show-summary
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <div class="listToolbar">
            <el-button
              v-if="dialogType !== 'view'"
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handleAddInfo"
            >
              新增
            </el-button>
           
          </div>
        </template>

        <template v-slot:action="{ row, $index }" v-if="dialogType !== 'view'">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            @confirm="handleDelInfo($index)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>

        <template v-slot:dataTime="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'tableList.' + $index + '.dataTime'">
            <el-date-picker
              v-model="row.dataTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"

            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:cost="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.cost'">
            <el-input type="number" v-model="row.cost"></el-input>
          </el-form-item>
        </template>
        <template
          v-slot:personal="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item :prop="'datasource.' + $index + '.personal'">
            <el-input  v-model="row.personal"></el-input>
          </el-form-item>
        </template>
        <template v-slot:place="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.place'">
            <el-input v-model="row.place"></el-input>
          </el-form-item>
        </template>

        <template
          v-slot:materialName="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item :prop="'datasource.' + $index + '.materialName'">
            <el-input v-model="row.materialName">
              <template slot="append">
                <el-link
                  type="primary"
                  :underline="false"
                  @click.native="materialOpen(row, $index)"
                >
                  选择</el-link
                >
              </template>
            </el-input>
          </el-form-item>
        </template>
        <template
          v-slot:materialNum="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item :prop="'datasource.' + $index + '.materialNum'">
            <el-input type="number" v-model="row.materialNum"></el-input>
          </el-form-item>
        </template>
        <template
          v-slot:ownershipId="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item :prop="'datasource.' + $index + '.ownershipId'">
            <el-cascader
              class="ele-block"
              :options="organizationList"
              placeholder="请选择"
              :props="defaultProps"
              ref="deptRef"
              :show-all-levels="false"
              v-model="row.ownershipId"
              @change="ownershipChange($index)"
              clearable
            ></el-cascader>
          </el-form-item>
        </template>
        <template v-slot:remark="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.remark'">
            <el-input type="textarea" v-model="row.remark"></el-input>
          </el-form-item>
        </template>
        <template v-slot:unit="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.unit'">
            <DictSelection
                dictName="计量单位"
                clearable
                v-model="row.unit"
              >
              </DictSelection> 

          </el-form-item>
        </template>
      </ele-pro-table>
   
    </el-form>
    <productList
      :currentIndex="-1"
      @changeParent="changeParent"
      ref="productListRef"
    ></productList>
  </div>
</template>
  

  <script>
import { getSummaries } from '@/utils/util.js';
import productList from '@/BIZComponents/product-list.vue';
export default {
  name: 'relatedInfoTable',

  props: {
    dialogType: '',
    organizationList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: { productList },

  data() {
    return {
      tableList: [],
      currentIndex: '',
      defaultProps: {
        multiple: false,
        checkStrictly: true,
        emitPath: false,
        children: 'children',
        value: 'id',
        label: 'name'
      }
    };
  },
  computed: {
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'dataTime',
          label: '日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'dataTime'
        },
        {
          prop: 'personal',
          label: '领用人',
          align: 'center',
          showOverflowTooltip: true,
          width: 120,
          slot: 'personal'
        },

        {
          prop: 'materialName',
          label: '物料名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          slot: 'materialName'
        },
        {
          prop: 'materialNum',
          label: '数量',
          align: 'center',
          showOverflowTooltip: true,
          width: 100,
          slot: 'materialNum'
        },
        {
          prop: 'unit',
          label: '单位',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          slot: 'unit'
        },
        {
          prop: 'ownershipName',
          label: '权属单位',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          slot: 'ownershipId'
        },

        {
          prop: 'cost',
          label: '预计费用',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'cost'
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: 200,
          align: 'center',
          showOverflowTooltip: true,
          slot: 'remark'
        },

        {
          columnKey: 'action',
          slot: 'action',
          label: '操作',
          resizable: false,
          width: 80,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ];
    }
  },
  mounted() {},
  methods: {
    getSummaries(param) {
      return getSummaries(param, 'cost');
    },
    //删除任务信息数据
    handleDelInfo(index) {
      this.tableList.splice(index, 1);
    },
    //修改回显
    putTableValue(data) {
      this.tableList = data || [];
    },
    getTableValue() {
      return this.tableList;
    },
    materialOpen(row, index) {
      this.currentIndex = index;
      this.$refs.productListRef.open(row, index);
    },
    changeParent(list) {
      if (list.length > 0) {
        this.$set(
          this.tableList[this.currentIndex],
          'materialName',
          list[0].name
        );
        this.$set(this.tableList[this.currentIndex], 'materialId', list[0].id);
      }
    },
    ownershipChange(index) {
      this.$nextTick(()=>{
        const data =this.$refs.deptRef.getCheckedNodes()
        this.$set(this.tableList[index], 'ownershipName', data[0].label);

      })
    },
    handleAddInfo() {
      this.tableList.push({
        dataTime: '',
        personal: '',
        place: '',
        materialName: '',
        materialId: '',
        materialNum: '',
        ownershipId: '',
        ownershipName: '',
        remark: '',
        cost: ''
      });
    }
  }
};
</script>
  
  
  <style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}
.listToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>