cd-work-flow-web/src/views/system/modules/DetailMaterialRegistration.vue

<template>
<a-modal
    title="详情"
    width="55%"
    :closable="true"
    @cancel="close"
    @ok="handelOk"
    :visible="visible"
  >
   <a-card :bordered="false">
     <a-spin :spinning="confirmLoading">
      <a-form :model="formState"  >
        <a-form-item label="编号" >
          {{formState.code}}
        </a-form-item>

        <a-form-item label="设备名称"  >
            {{formState.name}}
        </a-form-item>
        <a-form-item label="型号"  >
            {{formState.model}}
        </a-form-item>
        <a-form-item label="购买日期"  >
            {{formState.buyTime}}
        </a-form-item>
        <a-form-item label="购买数量"  >
            {{formState.buyNum}}
        </a-form-item>
        <a-form-item label="单位"  >
            {{formState.unit}}
        </a-form-item>
        <a-form-item label="购买金额"  >
            {{formState.amount}}
        </a-form-item>
        <a-form-item label="使用者"  >
            {{formState.useId}}
        </a-form-item>
        <a-form-item label="状态"  >
            {{formState.type}}
        </a-form-item>
        <a-form-item label="供货方"  >
            {{formState.supply}}
        </a-form-item>
        <a-form-item label="备注"  >
            {{formState.remarks}}
        </a-form-item>
        <a-form-item label="来源"  >
            {{formState.source}}
        </a-form-item>
      </a-form>
    </a-spin>

    </a-card>
    <a-divider style="height: 1px; background-color: balck" />

      <a-card :bordered="false" >
          <div class="purchase-order-table"  >
            <div >
               <h6 class="table-title" style="float: left">维修服务记录</h6>
                <a-button @click="addList" type="primary" style="float: right;position: relative;z-index: 11" >新增</a-button>
            </div>
              <a-table
                :columns="Columns"
                :data-source="List"
                bordered
                :pagination="false"
              >
              <span slot="headCode" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.headCode}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.headCode"/>
              </span>
              <span slot="infoDate" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.infoDate}}</span>
                  <a-date-picker
                     style="width: 100%"
                     placeholder="请选择时间"
                    v-model="record.infoDate"
                    v-if="record.state=='1'"
                   />
              </span>
              <span slot="items" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.items}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.items"/>
              </span>
              <span slot="cost" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.cost}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.cost"/>
              </span>
              <span slot="remarks" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.remarks}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.remarks"/>
              </span>
               <span slot="operation" slot-scope="text, record">
                 <a @click="handleEdit(record)">编辑</a>
                 <a-divider type="vertical" />
                 <a @click="handleDetail(record)" style="color:red">删除</a>
                 <a-divider type="vertical" v-if="record.state=='1'"/>
                 <a @click="handleCl(record)" style="color:red" v-if="record.state=='1'">取消</a>
               </span>
              </a-table>
          </div>
           <div class="purchase-order-table" >
             <div>
               <h6 class="table-title" style="float: left">领用记录</h6>
                <a-button @click="addList1" type="primary" style="float: right;position: relative;z-index: 11" >新增</a-button>
            </div>
              <a-table
                :columns="Columns1"
                :data-source="List1"
                bordered
                :pagination="false"
              >
              <span slot="headCode" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.headCode}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.headCode"/>
              </span>
              <span slot="infoDate" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.infoDate}}</span>
                  <a-date-picker
                     style="width: 100%"
                     placeholder="请选择时间"
                    v-model="record.infoDate"
                    v-if="record.state=='1'"
                   />
              </span>
              <span slot="items" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.items}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.items"/>
              </span>
              <span slot="cost" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.cost}}</span>
                 <a-date-picker
                     style="width: 100%"
                     placeholder="请选择时间"
                    v-model="record.cost"
                    v-if="record.state=='1'"
                   />
              </span>
              <span slot="remarks" slot-scope="text, record">
                 <span v-if="record.state=='0'">{{record.remarks}}</span>
                 <a-input v-else placeholder="请输入" v-model="record.remarks"/>
              </span>
              <span slot="operation" slot-scope="text, record">
                 <a @click="handleEdit(record)">编辑</a>
                 <a-divider type="vertical" />
                 <a @click="handleDetail(record)" style="color:red">删除</a>
                  <a-divider type="vertical" v-if="record.state=='1'"/>
                 <a @click="handleCl1(record)" style="color:red" v-if="record.state=='1'">取消</a>
               </span>
              </a-table>
          </div>
      </a-card>
</a-modal>
  
</template>

<script>



export default {
  name: 'DetailMaterialRegistration', 
  mixins: [],
  computed: {},
  components: {  }, 
  data() {
    return{
        visible:false,
         formState:{

            },
        confirmLoading: false,
        Columns:[
            
            {
            title: '主要信息编号',
            align: "center",
            dataIndex: 'headCode',
            width: 160,
            scopedSlots: { customRender: 'headCode' },
          },
          {
            title: '日期',
            align: "center",
            dataIndex: 'infoDate',
            width: 180,
            scopedSlots: { customRender: 'infoDate' },
            
          },
          {
            title: '维修项目',
            align: "center",
            dataIndex: 'items',
            width: 180,
            scopedSlots: { customRender: 'items' },
          },
          {
            title: '费用',
            align: "center",
            dataIndex: 'cost',
            width: 120,
            scopedSlots: { customRender: 'cost' },
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'remarks',
            width: 120,
            scopedSlots: { customRender: 'remarks' },
          },
          {
            title: '操作',
            align: "center",
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            width: 180
          },
        ],
         Columns1:[
            
            {
            title: '主要信息编号',
            align: "center",
            dataIndex: 'headCode',
            width: 160,
            scopedSlots: { customRender: 'headCode' },
          },
          {
            title: '领用日期',
            align: "center",
            dataIndex: 'infoDate',
            width: 180,
            scopedSlots: { customRender: 'infoDate' },
          },
          {
            title: '领用人',
            align: "center",
            dataIndex: 'items',
            width: 160,
            scopedSlots: { customRender: 'items' },
          },
          {
            title: '归还日期',
            align: "center",
            dataIndex: 'cost',
            width: 180,
            scopedSlots: { customRender: 'cost' },
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'remarks',
            width: 120,
            scopedSlots: { customRender: 'remarks' },
          },
          {
            title: '操作',
            align: "center",
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            width: 180
          },
        ],
        List:[],
        List1:[],
    }
    
  },
   // 接收父组件查询方法
  props: {
    
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    close(){
        this.visible = false
        this.List =[]
        this.List1=[]
    },
    getData(){
      // this.List.push({
      //   headCode:'1',
      //   infoDate:'1',
      //   items:'1',
      //   cost:'1',
      //   remarks:'1',
      //   state:'0',
      // })
      // this.List1.push({
      //   headCode:'1',
      //   infoDate:'1',
      //   items:'1',
      //   cost:'1',
      //   remarks:'1',
      //   state:'0'
      // })
    },
    handleEdit(record){
    record.state = '1'
    record.default = 'edit'
  },
  addList(){
        var line ={
        headCode:'',
        infoDate:'',
        items:'',
        cost:'',
        remarks:'',
        state:'1',
        default:'add'
      }
      this.List.unshift(line)
  },
  addList1(){
        var line ={
        headCode:'',
        infoDate:'',
        items:'',
        cost:'',
        remarks:'',
        state:'1',
        default:'add'
      }
      this.List1.unshift(line)
  },
  handleCl(record){
    if(record.default == 'add'){
      this.List.shift()
    }else if(record.default == 'edit'){
      record.state ='0'
    }
  },
  handleCl1(record){
    if(record.default == 'add'){
      this.List1.shift()
    }else if(record.default == 'edit'){
      record.state ='0'
    }
  },
  handelOk(){

  }
 }
}
</script>

<style lang="less" scoped>
/deep/.ant-form{
    display: flex !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

/deep/ .ant-form-item{
    display: flex;
    width: 24%;
    justify-content: center;
}
/deep/ .ant-form-item-label{
  width: 35%;
}
/deep/.ant-modal{
    background-color: red !important;
}
.table-title {
  margin: 0;
  border: 1px solid #e8e8e8;
  background-color: #f2f2f2;
  border-top-right-radius: 16px;
  border-bottom: none;
  font-size: 16px;
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.purchase-order-table{
  margin-bottom: 10px;
}

/deep/ .ant-card-body{
      padding: 0px 32px !important;
}
/deep/ .ant-divider-horizontal{
  margin: 13px 0;
}


</style>