<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">新增产品基线</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="确定要删除吗？"
                  @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="内容说明" 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: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    },
    {
      title: '内容说明',
      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('已删除成功')
    // })
  }
  //用户点击了确定取消按钮
  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('通过验证')
    }).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('上传错误');
    }
  };

  const beforeUpload = (file) => {
    // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    // if (!isJpgOrPng) {
    //   message.error('上传文件格式错误，只支持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})

  // 规则汇总
  const validatePhone = async (rule, value) => {
    if (value === '') {
      return Promise.reject('请输入电话号码');
    } else {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        return Promise.reject('手机号码错误，请检查后重新输入！');
      }
      return Promise.resolve();
    }
  }
  const validateIdCard = async (rule, value) => {
    if (value === '') {
      return Promise.reject('请输入身份证号码');
    } else {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!reg.test(value)) {
        return Promise.reject('身份证号码错误，请检查后重新输入！');
      }
      return Promise.resolve();
    }
  }
  const validateEmail = async (rule, value) => {
    if (value === '') {
      return Promise.reject('请输入内部电子邮箱');
    } else {
      const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      if (!reg.test(value)) {
        return Promise.reject('内部电子邮箱格式错误，请检查后重新输入！');
      }
      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: "请输入产品基线名称",}],
    content: [{required: true, trigger: 'change', message: "请输入内容说明"}],
    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>

自定义触发

544070096112e03473b3b892adfc0b9.png

9bf34b7b923e0cc4458ba9cfaf00810.png