drp-ui/src/views/material/changeApply/see/index.vue

<!-- 批量新增 -->
<script>
import useColumns from "../add/column";
import {addChangeList, getMaterialDetails, getChangeDetails, editChangeList} from '@/api/changeApply/basic';


export default {
  name: "SeeChangeOrders",
  props: {
    dict: {
      type: Object,
    },
  },
  components: {
    AmendantRecord: () => import("../amendantRecord/index.vue"),
    ElSuperForm: () => import("@/components/super-form/index.vue"),
    ElSuperTable: () => import("@/components/super-table/index.vue"),
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    ElPopoverTreeSelect: () =>
      import("@/components/popover-tree-select/index.vue"),
  },

  data() {

    const {
      TabColumns,
      TableColumns,
      TabColumns: [
        {
          item: { key: tabName },
        },
      ],
    } = useColumns();

    const rules = this.$init.rules([...TabColumns, ...TableColumns]);
    const params = this.$init.params([...TabColumns, ...TableColumns]);
    let tabColumns = _.cloneDeep(TabColumns);
    tabColumns =  tabColumns.map(item =>( 

      {...item,
        TableColumns: [...item.TableColumns.map(column =>({
          item:{...column.item,disabled:true},
          attr:{
            ...column.attr,
            disabled:true
          }
        }))]
      }
      )

    )

    console.log(tabColumns,'tabColumns');
    
    return {
      width: "100%",
      visible: false,
      loading:false,
      title:'查看',
      rules,
      params,
      tabName: tabName,
      TabColumns: tabColumns,
      TableColumns: TableColumns,
    };
  },
  computed: {
   
    materialInfo:{
      get(){
        const { materialBasic } = this.params;
        this.params.materialBasic = materialBasic.map((item, index) => ({
          ...item,
          $index: index,
        }));

        return {
          materialBasic: this.params.materialBasic.filter(
            ({ delFlag }) => delFlag !== "2"
          ),
        }
      },
      set(){},
    }
  
  },
  watch: {
    
  },
  methods: {
    setVisible(prop){
      this.visible = prop;
    },
    beforeOpen(){
    },
    //
    async fetchItem(prop) {
      try {
        // try
        this.loading = true;

        let { code, data } = await getChangeDetails(prop.id);

        if(code == 200){
          this.params = data;
        }
        
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    
    //
    async hide() {
      const {
        TabColumns,
        TableColumns,
        TabColumns: [
          {
            item: { key: tabName },
          },
        ],
      } = useColumns();
      this.visible = false;
      this.tabName = tabName;
      this.$emit('success');
      this.params = this.$init.params([...TabColumns, ...TableColumns]);
    },
   
    async handleSubmit(){
      this.params = {...this.params,status:'1'};
      console.log(this.params,'this.params');
      try {
          this.loading = true;
          
          const {code,msg} = await addChangeList(this.params);

          if(code == 200){

            this.hide();
            this.$notify.success({
              message: msg,
            });
          }
          
        } catch (error) {}
        finally{
          this.loading = false;
        }
    },
    handleSubmitValidate(prop,cb){

      this.$refs[prop].$refs[prop].validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;

            await cb();
            
          } catch (err) {
            // catch
            console.error(err);
          } finally {
            // finally
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
  created() {
  },
  mounted() {},
  destroyed() {},
};
</script>

<template>
    <el-drawer
      v-bind="$attrs"
      v-on="$listeners"
      :size="width"
      :visible.sync="visible"
      destroy-on-close
      :show-close="false"
      @close="hide"
      @open="beforeOpen"
      v-loading="loading"
    >
      <div 
        slot="title" 
        style="display: flex;
            justify-content: space-between;
            align-items: center;"
      >
        <h3>{{title}}</h3>
        <div>
          <el-button 
            v-if="params.status === '0' || params.status === '3'"
            type="primary"
            :size="$attrs.size" 
            :loading="loading" 
            @click="handleSubmit"
          >
            提 交
          </el-button>
          <el-button :size="$attrs.size" :loading="loading" @click="hide"
            >取 消</el-button>
        </div>
      </div>
      <el-super-form
        v-model="params"
        :dict="dict"
        :rules="rules"
        :size="$attrs.size"
        :columns="TableColumns"
        ref="superForm"
        label-width="auto"
        label-position="right"
        style="padding: 20px"
      >
        <template slot="puOrgName" slot-scope="scope">
          <component
            v-bind="scope.attr"
            v-model="scope.row[scope.item.key]"
            :size="$attrs.size"
            :source.sync="scope.row"
            @change="changePuOrgName({ ...scope, select: $event })"
          >
          </component
        ></template>
      </el-super-form>
      
    
        <el-tabs v-model="tabName" style="padding: 0 20px 20px">
          <el-tab-pane
            v-for="({ item, TableColumns: columns }, index) in TabColumns"
            :key="index"
            :label="item.title"
            :name="item.key"
            lazy
          >
            <el-super-table
              v-model="materialInfo[item.key]"
              :dict="dict"
              :ref="tabName"
              :columns="columns"
              :size="$attrs.size"
            >
              <template slot="materialName" slot-scope="scope">
                <component
                  v-bind="scope.attr"
                  v-model="scope.row[scope.item.key]"
                  :size="$attrs.size"
                  :source.sync="scope.row"
                  @change="changeMaterialName(scope)"
                >
                </component>
              </template>
              <el-table-column fixed="right" label="操作" width="120" align="center">
                
                <template slot-scope="scope">
                  <AmendantRecord
                    v-if=" tabName ==='materialBasic' "
                    v-model="scope.row"
                  ></AmendantRecord>
                  
                </template>
              </el-table-column>
            </el-super-table>
          </el-tab-pane>
        </el-tabs>
     
    </el-drawer>
</template>

<style scoped>
::v-deep .el-table__row.is-hidden {
  display: none;
}
</style>