CostumingPlatform/ant-design-vue-jeecg/src/views/erp/fabric/modules/ZyFabricFormDetailModel.vue

<template>
  <div>
    <a-modal
      title="面料管理-详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width='1400'
      @ok="handleOk"
      @cancel="handleCancel"
      style="display:flex;"
    >
      <div style="width: 96%;margin:0 auto 40px;padding-bottom: 30px">
        <h1 style="text-align: center;margin-bottom: 0px;padding-bottom: 20px">黄淮学院服装智能制造管理平台 - <span>面料管理</span></h1>
        <div>
      <el-descriptions class="margin-top" :column="4" border style="margin-top: 50px">
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-receiving"></i>面料类型</template>
          {{model.typeId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-coin"></i>编号</template>
          {{model.fabricNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-postcard"></i>名称</template>
          {{model.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-copy-document"></i>颜色</template>
          {{model.color}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-copy-document"></i>花样</template>
          {{model.pattern}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-price-tag"></i>材质</template>
          {{model.material}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-files"></i>厚度</template>
          {{model.ply}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-files"></i>单价</template>
          {{model.money}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-files"></i>零售价</template>
          {{model.money}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-files"></i>品牌</template>
          {{model.brandId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-receiving"></i>单位</template>
          {{model.unit}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-coin"></i>密度</template>
          {{model.density}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-postcard"></i>名称</template>
          {{model.clothW}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-copy-document"></i>幅宽</template>
          {{model.clothW}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-copy-document"></i>销售地区</template>
          {{model.location}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-price-tag"></i>状态</template>
          {{model.status}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-location-outline"></i>供货商</template>
          {{model.supplierInfo}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-picture-outline"></i>图片</template>
          {{model.imageUrl}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-paperclip"></i>二维码</template>
          {{model.qRcode}}
        </el-descriptions-item>
      </el-descriptions></div>
      </div>
    </a-modal>
  </div>

<!--            <a-form-model-item label="面料类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="typeId">-->
<!--              <j-popup-->
<!--                v-model="model.typeId"-->
<!--                field="id"-->
<!--                org-fields="id"-->
<!--                dest-fields="id"-->
<!--                code="zy_fabric_type"-->
<!--                :multi="false"-->
<!--                @input="popupCallback"-->

<!--            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fabricNumber">-->
<!--              <a-input v-model="model.fabricNumber" placeholder="请输入编号"  ></a-input>-->
<!--            </a-form-model-item>-->

<!--            <a-form-model-item label="花样" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pattern">-->
<!--              <j-search-select-tag v-model="model.pattern" dict="pattern"  />-->
<!--            </a-form-model-item>-->

<!--            <a-form-model-item label="材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="material">-->
<!--              <j-search-select-tag v-model="model.material" dict="material"  />-->
<!--            </a-form-model-item>-->

<!--            <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">-->
<!--              <j-search-select-tag v-model="model.unit" dict="unit1"  />-->
<!--            </a-form-model-item>-->

<!--            <a-form-model-item label="密度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="density">-->
<!--              <j-search-select-tag v-model="model.density" dict="density"  />-->
<!--            </a-form-model-item>-->

<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">-->
<!--              <j-search-select-tag v-model="model.status" dict="fabric_status"  />-->
<!--            </a-form-model-item>-->

<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="图片地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageUrl">-->
<!--              <j-image-upload isMultiple  v-model="model.imageUrl" ></j-image-upload>-->
<!--            </a-form-model-item>-->



</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import OnlineCamera from './Components/OnlineCamera'

  export default {
    name: 'ZyFabricFormDetailModel',
    components: {
      OnlineCamera
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          typeId: [
            { required: true, message: '请选择类型!'},
          ],
          color: [
            { required: true, message: '请输入颜色!'},
          ],
          pattern: [
            { required: true, message: '请输入花样!'},
          ],
          fabricNumber: [
            { required: true, message: '请输入面料编号!'},
          ],
          name: [
            { required: true, message: '请输入名称!'},
          ],
          money: [
            { required: false},
            { pattern: /^\d{0,11}$/, message: '长度不能超过11位数字'},
          ],
          retailPrice: [
            { required: false},
            { pattern: /^\d{0,11}$/, message: '长度不能超过11位数字'},
          ],
          location: [
            { required: false},
            { pattern: /^.{0,30}$/, message: '长度不能超过30位字符'},
          ],
        },
        url: {
          add: "/fabric/zyFabric/add",
          edit: "/fabric/zyFabric/edit",
          queryById: "/fabric/zyFabric/queryById"
        },
        visible:false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      showModal(id) {
        this.visible = true;
        this.$http.get('/fabric/zyFabric/queryById?id='+id).then(
          res=>{
            this.model = res.result
            console.log(this.model)

          }
        )
      },
      handleOk() {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 1);
      },
      handleCancel() {
        this.visible = false;
      },

    }
  }
</script>
<style scoped>
  .margin-top i{margin-right: 5px}
</style>