15.13

yunxi-ui-admin-vben/src/views/users/newNustomer/criterion.vue

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { EditOutlined, FolderAddOutlined, LoadingOutlined, PlusOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import type { SelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue'
+import type { Rule } from 'ant-design-vue/es/form'
+import type { Dayjs } from 'dayjs'
+
+//结算信息切换  //保留
+const wayvalues = ref<number>(1)
+const payvalues = ref<number>(1)
+
+type RangeValue = [Dayjs, Dayjs]
+const dayvalue1 = ref<RangeValue>()
+//合作范围的业务线标签
+const inputRef = ref()
+const state = reactive({
+  tags: ['业务线名称', '业务线名称', '业务线名称'],
+  inputVisible: false,
+  inputValue: '',
+})
+
+function handleClose(removedTag: string) {
+  const tags = state.tags.filter(tag => tag !== removedTag)
+  console.log(tags)
+  state.tags = tags
+}
+
+function showInput() {
+  state.inputVisible = true
+  nextTick(() => {
+    inputRef.value.focus()
+  })
+}
+
+function handleInputConfirm() {
+  const inputValue = state.inputValue
+  let tags = state.tags
+  if (inputValue && !tags.includes(inputValue)) 
+    tags = [...tags, inputValue]
+  
+  console.log(tags)
+  Object.assign(state, {
+    tags,
+    inputVisible: false,
+    inputValue: '',
+  })
+}
+
+//代表人信息表格
+const mationtablecolumns = [
+  {
+    name: '',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '身份证照',
+    dataIndex: 'identificationphoto',
+    key: 'identificationphoto',
+  },
+  {
+    title: '身份证号',
+    key: 'Idnumber',
+    dataIndex: 'Idnumber',
+  },
+  {
+    title: '证件有效期',
+    key: 'validity',
+  },
+  {
+    title: '授权/证明文件',
+    key: 'impower',
+  },
+  {
+    title: '更新时间',
+    key: 'turnover',
+  },
+  {
+    title: '操作',
+    key: 'operate',
+  },
+]
+
+const mationtabledata = [
+  {
+    key: '1',
+    type:'法定代表人',
+    name: '业务线',
+    identificationphoto:'',
+    Idnumber:'147289*********',
+    validity: '2022/11/02至2023/01/12',
+    impower: '',
+    turnover:'2022-10-07 15:21:36',
+  },
+ 
+  {
+    key: '2',
+    type:'法定代表人',
+    name: '业务线',
+    identificationphoto:'',
+    Idnumber:'147289*********',
+    validity: '2022/11/02至2023/01/12',
+    impower: '',
+    turnover:'2022-10-07 15:21:36',
+  },
+  {
+    key: '3',
+    type:'法定代表人',
+    name: '业务线',
+    identificationphoto:'',
+    Idnumber:'147289*********',
+    validity: '2022/11/02至2023/01/12',
+    impower: '',
+    turnover:'2022-10-07 15:21:36',
+  },
+  {
+    key: '4',
+    type:'法定代表人',
+    name: '业务线',
+    identificationphoto:'',
+    Idnumber:'147289*********',
+    validity: '2022/11/02至2023/01/12',
+    impower: '',
+    turnover:'2022-10-07 15:21:36',
+  },
+  {
+    key: '5',
+    type:'法定代表人',
+    name: '业务线',
+    identificationphoto:'',
+    Idnumber:'147289*********',
+    validity: '2022/11/02至2023/01/12',
+    impower: '',
+    turnover:'2022-10-07 15:21:36',
+  },
+]
+
+//日期
+const day = ref<Dayjs>()
+//表单和下拉选择校验
+interface FormState {
+  username: string
+  region: string | undefined
+  select: boolean
+}
+
+const formState = reactive<FormState>({
+  username: '',
+  region: undefined,
+  select: false,
+})
+
+const rules: Record<string, Rule[]> = {
+  username: [
+    { required: true, message: 'Please input Activity name', trigger: 'change' },
+    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+  ],
+  region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+  select: [{ required: true, message: '请选择人员', trigger: 'change' }],
+ 
+}
+
+function onFinish(values: any) {
+  console.log('Success:', values)
+}
+
+function onFinishFailed(errorInfo: any) {
+  console.log('Failed:', errorInfo)
+}
+
+
+//归属人员
+function affiliationChange(value: string) {
+  console.log(`selected ${value}`)
+}
+
+const options = ref<SelectProps['options']>([
+  {
+    label: '总裁办',
+    options: [
+      {
+        value: 'jack',
+        label: 'Jack',
+      },
+      {
+        value: 'lucy',
+        label: 'Lucy',
+      },
+    ],
+  },
+  {
+    label: '人事部',
+    options: [
+      {
+        value: 'yiminghe',
+        label: 'Yiminghe',
+      },
+    ],
+  },
+])
+
+//城市
+const shouldFixToBottom = ref(false) // 控制是否应该固定到底部
+
+// 监听滚动事件或其他条件，根据条件来决定是否固定到底部
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+// 在组件销毁前移除滚动事件监听
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+function handleScroll() {
+  // 根据滚动位置或其他条件来判断是否应该固定到底部
+  if (window.scrollY > 100) 
+    shouldFixToBottom.value = true
+  
+  else 
+    shouldFixToBottom.value = false
+  
+}
+//单选
+const value1 = ref<string>('a')
+//上传图片
+function getBase64(img: Blob, callback: (base64Url: string) => void) {
+  const reader = new FileReader()
+  reader.addEventListener('load', () => callback(reader.result as string))
+  reader.readAsDataURL(img)
+}
+
+const fileList = ref([])
+const loading = ref<boolean>(false)
+const imageUrl = ref<string>('')
+
+function handleChange(info: UploadChangeParam) {
+  if (info.file.status === 'uploading') {
+    loading.value = true
+    return
+  }
+  if (info.file.status === 'done') {
+    // Get this url from response in real world.
+    getBase64(info.file.originFileObj, (base64Url: string) => {
+      imageUrl.value = base64Url
+      loading.value = false
+    })
+  }
+  if (info.file.status === 'error') {
+    loading.value = false
+    message.error('upload error')
+  }
+}
+
+function beforeUpload(file: UploadProps['fileList'][number]) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+  if (!isJpgOrPng) 
+    message.error('You can only upload JPG file!')
+  
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) 
+    message.error('Image must smaller than 2MB!')
+  
+  return isJpgOrPng && isLt2M
+}
+
+//覆盖antd样式
+
+const RabbitStyle = [{
+  height:'60px',
+}]
+</script>
+
+<template>
+  <a-card
+    style="width: 1688px;
+           height: 4062px;
+           margin: 20px auto;  
+           overflow:auto; "
+  >
+    <div class="title">
+      新增客户
+    </div>
+    <div class="itembox">
+      <a-form
+        :model="formState"
+        name="basic"
+        :label-col="{ span: 2 }"
+        :wrapper-col="{ span: 5 }" 
+        autocomplete="off"
+        @finish="onFinish"
+        @finishFailed="onFinishFailed"
+      >
+        <!-- 客户分类 -->
+        <a-row>
+          <a-col :span="24">
+            <div class="moduletop">
+              <p>
+                <span>▋</span>
+                客户分类
+              </p>
+            </div>
+          </a-col>
+          <a-col :span="24">
+            <p class="hint">
+              不同的客户分类可实现不同的业务流程，商品类型一旦保存不可修改，请选择更匹配你需求的一个。
+            </p>
+          </a-col>
+          <a-col :span="24">
+            <div class="selection"> 
+              <a-radio-group v-model:value="value1" :style="RabbitStyle" button-style="solid">
+                <a-radio-button :style="RabbitStyle" value="a">
+                  <div class="ification">
+                    <p>一级客户</p>
+                    <span>钢厂/回收机构</span>
+                  </div>
+                </a-radio-button>
+                <a-radio-button :style="RabbitStyle" value="d">
+                  <div class="ification">
+                    <p>二级客户</p>
+                    <span>其他客户</span>
+                  </div>
+                </a-radio-button>
+              </a-radio-group>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </a-card>
+</template>
+
+<style scoped lang="less">
+.title{
+  font-size: 22px;
+  font-weight: normal;
+  font-weight: 700;
+  line-height: 34px;
+  color: #262626;
+}
+.module{
+  width: 95%;
+  margin:0 auto;
+}
+.moduletop{
+  padding-bottom: 16px;
+  margin: 40px 15px ;
+  border-bottom: 1px solid #E5E5E5;
+
+    p{
+    width: 110px;
+    height: 34px;
+    margin-bottom: 15px; 
+    font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
+    font-size:16px;
+    line-height: 34px;
+    background: linear-gradient(90deg, #9EF9FF 0%, #FFF 100%);
+
+    span{
+    font-size:14px;
+    color:#409EFF;
+     }
+    }
+  }
+  .hint{
+    font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 22px;
+    color: #8C8C8C;
+   }
+   .selection{
+    .ification{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10px;
+      line-height: 10px;
+      
+      
+    }
+  }
+</style>