<template>
  <div class="h-full w-full p-2 overflow-hidden layout-side softwareDetailCss"
       style="background-color: #eef2fc">
    <div style="width: calc(100% - 0px);height: 100%;">
      <div class="layout-right-top" style="height: 40px;">
        <a-button type="primary" @click="back">返回</a-button>
        <a-button key="back" type="primary" @click="addLine">新增產(chǎn)品基線</a-button>
      </div>
      <div style="height: calc(100% - 40px);">
        <a-table bordered :columns="clomuns" :data-source="tableList" :rowKey="(record) => record.id"
        >
          <template #action="{ record }">
            <span>
              <a-tooltip placement="topRight">
                <template #title>編輯</template>
                <FormOutlined
                  class="mr-1 cursor-pointer-def primary-color"
                  style="font-size: 17px"
                />
              </a-tooltip>
              <a-tooltip placement="topRight">
                <template #title>刪除</template>
                <a-popconfirm
                  title="確定要?jiǎng)h除嗎？"
                  @confirm="comfirm(record)"
                  @cancel="cancel"
                >
                  <DeleteOutlined
                    class="cursor-pointer-def primary-color"
                    style="font-size: 17px"
                  />
                </a-popconfirm>
              </a-tooltip>
               <a-tooltip placement="topRight">
                <template #title>下載</template>
                 <VerticalAlignBottomOutlined
                   class="mr-5 cursor-pointer-def danger-color"
                   style="font-size: 17px;margin-left: 5px;"
                 />
              </a-tooltip>
            </span>
          </template>
        </a-table>
      </div>
    </div>
    <!--彈窗-->
    <ak-dialog title="基線信息編輯" width="600px" animation="zoom" top="10vh" v-model="cusVisible" :closeModal="false"
               class="dialogPadding">
      <template #footer>
        <div class="w-full layout-right-center">
          <a-button key="back" @click="cusVisible = false">取消</a-button>
          <a-button type="primary" @click="handleOk">提交</a-button>
        </div>
      </template>
      <div style="width: 500px;">
        <a-form
          :model="userFormState"
          ref="userFormRef"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="基線名稱" name="lineName">
                <a-input v-model:value="userFormState.lineName"/>
              </a-form-item>
              <a-form-item label="內(nèi)容說明" name="content">
                <a-input v-model:value="userFormState.content"/>
              </a-form-item>
              <a-form-item label="用戶手冊" name="file1">
                <a-upload
                  v-model:file-list="fileList"
                  name="file"
                  :multiple="true"
                  :action="uploadFileUrl"
                  @change="handleChange"
                  :before-upload="beforeUpload"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>
                    Click to Upload
                  </a-button>
                </a-upload>
              </a-form-item>
              <!--<a-form-item label="用戶頭像">-->
              <!--  <a-upload-->
              <!--    v-model:file-list="fileList"-->
              <!--    name="file"-->
              <!--    list-type="picture-card"-->
              <!--    class="avatar-uploader"-->
              <!--    :show-upload-list="false"-->
              <!--    :action="uploadFileUrl"-->
              <!--    :before-upload="beforeUpload"-->
              <!--    @change="handleChange"-->
              <!--    :disabled="state.onlyRead"-->
              <!--  >-->
              <!--    <nip-avatar v-if="userFormState.userImg" :url="userFormState.userImg" :size="94" :radius="false"-->
              <!--                :border="false"/>-->
              <!--    <div v-else>-->
              <!--      <loading-outlined v-if="loading"></loading-outlined>-->
              <!--      <plus-outlined v-else></plus-outlined>-->
              <!--      <div class="ant-upload-text">上傳</div>-->
              <!--    </div>-->
              <!--  </a-upload>-->
              <!--</a-form-item>-->
            </a-col>
          </a-row>
        </a-form>
      </div>
    </ak-dialog>
  </div>
</template>

<script>
  export default {
    name: "softwareDetail"
  }
</script>

<script setup>
  import {ref} from "vue";
  import {softwareDetailDel, softwareDetailGet} from "../../../../common/api/softwareDetail";
  import {message} from "ant-design-vue";
  import {
    DownOutlined,
    DeleteOutlined,
    FormOutlined,
    UploadOutlined,
    VerticalAlignBottomOutlined
  } from "@ant-design/icons-vue"

  const clomuns = [
    {
      title: '基線名稱',
      dataIndex: 'lineName',
      key: 'lineName',
      // width: '10%',
      ellipsis: true
    },
    {
      title: '創(chuàng)建時(shí)間',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    },
    {
      title: '內(nèi)容說明',
      dataIndex: 'content',
      key: 'content',
      // width: '10%',
      ellipsis: true
    },
    {
      title: '用戶手冊',
      dataIndex: 'userBooks',
      key: 'userBooks',
      // width: '10%',
      ellipsis: true
    },
    {
      title: '源碼',
      dataIndex: 'code',
      key: 'code',
      // width: '10%',
      ellipsis: true
    },
    {
      title: '安裝文件',
      dataIndex: 'exeFile',
      key: 'exeFile',
      // width: '10%',
      ellipsis: true
    },
    {
      title: '操作',
      dataIndex: 'options',
      key: 'options',
      width: '10%',
      ellipsis: true,
      slots: {customRender: 'action'}
    }
  ]
  let tableList = ref([])

  const comfirm = (record) => {
    // softwareDetailDel(record).then(async (res) => {
    //   await softwareDetailGet({softwareId}).then(res => {
    //     tableList.value = res.data
    //   })
    //   message.success('已刪除成功')
    // })
  }
  //用戶點(diǎn)擊了確定取消按鈕
  const cancel = () => {
    message.warning('已取消刪除')
  }
  const back = () => {
    history.go(-1)
  }

  /**
   * 彈窗
   * */

  let cusVisible = ref(false)
  let addLine = () => {
    cusVisible.value = true
  }
  const userFormRef = ref()
  const handleOk = () => {
    userFormRef.value.validate().then(() => {
      console.log('通過驗(yàn)證')
    }).catch((error) => {
      console.log("error", error);
    })
  };


  const userFormState = ref({
    lineName: '',
    content: '',
    userBooks: '',
    code: '',
    exeFile: ''
  })

  let uploadFileUrl = ref(window.uploadFileUrl)
  const fileList = ref([]);
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      console.log(info.file.response.data.url)
      console.log(fileList)
    }
    if (info.file.status === 'error') {
      message.error('上傳錯(cuò)誤');
    }
  };

  const beforeUpload = (file) => {
    // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    // if (!isJpgOrPng) {
    //   message.error('上傳文件格式錯(cuò)誤，只支持jpg或者png圖片!');
    // }
    const isLt2M = file.size / 1024 / 1024 < 4;
    if (!isLt2M) {
      message.error('上傳文件超出4MB大小限制！');
    }
    // return isJpgOrPng && isLt2M;
  };

  let labelCol = ref({span: 5})
  let wrapperCol = ref({span: 17})

  // 規(guī)則匯總
  const validatePhone = async (rule, value) => {
    if (value === '') {
      return Promise.reject('請輸入電話號(hào)碼');
    } else {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        return Promise.reject('手機(jī)號(hào)碼錯(cuò)誤，請檢查后重新輸入！');
      }
      return Promise.resolve();
    }
  }
  const validateIdCard = async (rule, value) => {
    if (value === '') {
      return Promise.reject('請輸入身份證號(hào)碼');
    } else {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!reg.test(value)) {
        return Promise.reject('身份證號(hào)碼錯(cuò)誤，請檢查后重新輸入！');
      }
      return Promise.resolve();
    }
  }
  const validateEmail = async (rule, value) => {
    if (value === '') {
      return Promise.reject('請輸入內(nèi)部電子郵箱');
    } else {
      const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      if (!reg.test(value)) {
        return Promise.reject('內(nèi)部電子郵箱格式錯(cuò)誤，請檢查后重新輸入！');
      }
      return Promise.resolve();
    }
  }
  const validateFile = async (rule, value,callback) =>{
    // console.log(rule)
    // console.log(value)
    console.log(fileList.value)
    if(fileList.value.length === 0) {
      return Promise.reject('請選擇需要上傳的文件')
    }else {
      return Promise.resolve();
    }
  }
  const rules = {
    file1:[{required: true, validator: validateFile, trigger: 'change'}],
    lineName: [{required: true, trigger: 'change', message: "請輸入產(chǎn)品基線名稱",}],
    content: [{required: true, trigger: 'change', message: "請輸入內(nèi)容說明"}],
    userAccount: [{required: true, message: "請輸入用戶名", trigger: 'change'}, {min: 3, max: 30, message: "用戶名長度在3~30字之間"}],
    phone: [{required: true, validator: validatePhone, trigger: 'change'}],
    idCard: [{required: true, validator: validateIdCard, trigger: 'change'}],
    email: [{required: true, validator: validateEmail, trigger: 'change'}],
    bday: [{required: true, message: "請輸入出生日期", trigger: 'change', type: "object"}],
  };


</script>

<style scoped lang="less">

</style>

自定義觸發(fā)

544070096112e03473b3b892adfc0b9.png

9bf34b7b923e0cc4458ba9cfaf00810.png