4dkk_mp/src/views/productOperation/modal/detailModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="title"
    @visible-change="handleVisibleChange"
    @cancel="resetFields"
    @ok="handleSubmit"
    :min-height="400"
  >
    <div class="pt-2px pr-3px">
      <BasicForm @register="registerForm">
        <template #text="{ model, field }">
          {{ model[field] }}
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { companyAdd, companyUpdate } from '/@/api/customer';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { uploadApi } from '/@/api/product/index';
  import { getByRyId, addAuth, checkAuthOtherApi } from '/@/api/operate';
  import { useModalInner } from '/@/components/Modal';
  import dayjs from 'dayjs';

  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const modelRef = ref(false);
      const isEdit = ref(true);
      const editTime = ref('');
      const fileFlow = reactive({
        file: null,
      });
      const { createMessage } = useMessage();
      const title = ref('新增客户');
      const optionsName = ref([]);
      const range = (start, end) => {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      };
      const disabledLookTime = (date) => {
        let startTime = editTime.value || '';
        const hour = dayjs(startTime).hour(); // 获取当前的小时
        const min = dayjs(startTime).minute(); // 获取当前的分钟
        const second = dayjs(startTime).second(); // 获取当前秒
        if (dayjs(date).format('YYYY-MM-DD') === dayjs(startTime).format('YYYY-MM-DD')) {
          if (dayjs(date).format('HH') === dayjs(startTime).format('HH')) {
            if (dayjs(date).format('mm') === dayjs(startTime).format('mm')) {
              return {
                disabledHours: () => range(0, 24).splice(0, hour),
                disabledMinutes: () => range(0, 60).splice(0, min),
                disabledSeconds: () => range(0, 60).splice(0, second),
              };
            } else {
              return {
                disabledHours: () => range(0, 24).splice(0, hour),
                disabledMinutes: () => range(0, 60).splice(0, min),
              };
            }
          } else {
            return {
              disabledHours: () => range(0, 24).splice(0, hour),
            };
          }
        }
      };
      const disabledTime = (date) => {
        const hour = dayjs().hour(); // 获取当前的小时
        const min = dayjs().minute(); // 获取当前的分钟
        const second = dayjs().second(); // 获取当前秒
        if (dayjs(date).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) {
          if (dayjs(date).format('HH') === dayjs().format('HH')) {
            if (dayjs(date).format('mm') === dayjs().format('mm')) {
              return {
                disabledHours: () => range(0, 24).splice(0, hour),
                disabledMinutes: () => range(0, 60).splice(0, min),
                disabledSeconds: () => range(0, 60).splice(0, second),
              };
            } else {
              return {
                disabledHours: () => range(0, 24).splice(0, hour),
                disabledMinutes: () => range(0, 60).splice(0, min),
              };
            }
          } else {
            return {
              disabledHours: () => range(0, 24).splice(0, hour),
            };
          }
        }
      };
      const schemas: FormSchema[] = [
        {
          field: 'num',
          component: 'Input',
          show: false,
          label: 'id',
          required: false,
        },
        {
          field: 'ryId',
          component: 'AutoComplete',
          label: '人员ID',
          required: true,
          componentProps: {
            filterOption: onFilterOption,
            onSearch: onSearch,
            onChange: (data) => {
              const item = optionsName.value && optionsName.value.find((ele) => ele.ryId == data);
              setFieldsValue({ ryNickName: item && item.ryNickName ? item.ryNickName : '' });
            },
          },
          colProps: {
            span: 20,
          },
        },
        {
          field: 'ryNickName',
          component: 'Input',
          label: '姓名',
          required: true,
          colProps: {
            span: 20,
          },
          componentProps: {
            disabled: true,
          },
        },
        {
          field: 'editAuth',
          component: 'RadioGroup',
          label: '编辑权限',
          defaultValue: 0,
          colProps: {
            span: 24,
          },
          componentProps: {
            options: getOptionList('editAuth', 1),
            onChange: async (value) => {
              let params = await getFieldsValue();
              console.log('params', params, value);
              isEdit.value = value.target.value == 0 ? true : false;
              if (value.target.value == 1) {
                params.lookAuth = 1;
              }
              params.isEmpower = isEdit.value ? [0] : params.isEmpower;
              setFieldsValue({ ...params, editAuth: value.target.value });
              updateSchema([
                {
                  field: 'editEndTime',
                  ifShow: value.target.value == 2,
                },
                {
                  field: 'lookAuth',
                  componentProps: {
                    disabled: value.target.value == 1,
                  },
                },
                {
                  field: 'lookEndTime',
                  ifShow: value.target.value != 1 && params.lookAuth == 2,
                },
                {
                  field: 'isEmpower',
                  componentProps: {
                    options: setOption(),
                  },
                },
              ]);
            },
          },
        },
        {
          field: 'editEndTime',
          component: 'DatePicker',
          label: '编辑到期日期',
          ifShow: false,
          required: true,
          rules: [
            {
              required: true,
              // @ts-ignore
              validator: async (rule, value) => {
                console.log('value',value, dayjs().isBefore(dayjs(value)))
                if (!value) {
                  return Promise.reject('请选中日期');
                }
                if (!dayjs().isBefore(dayjs(value))) {
                  /* eslint-disable-next-line */
                  return Promise.reject('到期时间已过期');
                }
                return Promise.resolve();
              },
              trigger: 'change',
            },
          ],
          componentProps: {
            disabled: false,
            showTime: {
              valueFormat: 'HH:mm',
              format: 'HH:mm',
            },
            showToday: false,
            valueFormat: 'YYYY-MM-DD HH:mm',
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm',
            disabledDate: (current) => {
              return current && current < dayjs().startOf('day');
            },
            disabledTime: disabledTime,
            onChange: (value) => {
              editTime.value = value;
              setFieldsValue({ lookEndTime: '' });
              updateSchema({
                field: 'lookEndTime',
                componentProps: {
                  disabledTime: disabledLookTime,
                  disabledDate: (current) => {
                    return current && (current < dayjs().startOf('day') || current < dayjs(value));
                  },
                },
              });
            },
          },
        },
        {
          field: 'lookAuth',
          component: 'RadioGroup',
          label: '查看权限',
          defaultValue: 1,
          colProps: {
            span: 24,
          },
          componentProps: {
            options: getOptionList('lookAuth', 1),
            onChange: (value) => {
              updateSchema({
                field: 'lookEndTime',
                ifShow: value.target.value == 2,
              });
            },
          },
        },
        {
          field: 'lookEndTime',
          component: 'DatePicker',
          label: '查看到期日期',
          ifShow: false,
          required: true,
          // defaultValue: dayjs().add(1, 'month').format('YYYY-MM-DD HH:mm'),
          componentProps: {
            disabled: false,
            type: 'datetime',
            showTime: {
              valueFormat: 'HH:mm',
              format: 'HH:mm',
            },
            showToday: false,
            valueFormat: 'YYYY-MM-DD HH:mm',
            format: 'YYYY-MM-DD HH:mm',
            disabledTime: disabledLookTime,
            disabledDate: (current) => {
              console.log('current', current);
              return current && current < dayjs();
            },
          },
          rules: [
            {
              required: true,
              // @ts-ignore
              validator: async (rule, value) => {
                if (!value) {
                  return Promise.reject('请选中日期');
                }
                if (!dayjs().isBefore(dayjs(value))) {
                  /* eslint-disable-next-line */
                  return Promise.reject('到期时间已过期');
                }
                return Promise.resolve();
              },
              trigger: 'change',
            },
          ],
        },
        {
          field: 'isAuthor',
          component: 'RadioGroup',
          label: '是否可授权他人',
          defaultValue: 0,
          colProps: {
            span: 24,
          },
          componentProps: {
            options: getOptionList('isAuthor', 1),
            onChange: (value) => {
              updateSchema({
                field: 'isEmpower',
                ifShow: value.target.value == 1,
              });
            },
          },
        },
        {
          field: 'isEmpower',
          component: 'CheckboxGroup',
          label: '授权他人权限',
          ifShow: false,
          colProps: {
            span: 24,
          },
          componentProps: {
            options: setOption(),
          },
        },
      ];
      const [
        registerForm,
        { validate, getFieldsValue, resetFields, setFieldsValue, updateSchema },
      ] = useForm({
        labelWidth: 110,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner(async (data) => {
        onSearch('');
        let checkAuthOther = await checkAuthOtherApi({ num: data.num });
        let setData = {
          ...checkAuthOther,
          ...data,
          isEmpower: [0], //[data.canAuthLook ? 0 : '', data.canEditLook ? 1 : ''],
        };
        let lookEndTime = checkAuthOther.lookEndTime?checkAuthOther.lookEndTime:dayjs().format('YYYY-MM-DD HH:mm:ss')
        let mylookEndTime = checkAuthOther.editEndTime>lookEndTime?checkAuthOther.editEndTime:lookEndTime
        editTime.value = checkAuthOther.editEndTime;
        console.log('setData', setData);
        isEdit.value = true;
        if (data) {
          title.value = data.id ? '编辑授权' : '新增授权';
          modelRef.value = data.id ? true : false;
          setFieldsValue({
            ...setData,
            editAuth: 0,
            isAuthor: 0,
          });
        } else {
          title.value = '新增客户';
        }
        updateSchema([
          {
            field: 'isEmpower',
            ifShow: false,
            componentProps: {
              options: setOption(),
            },
          },
          {
            field: 'isAuthor',
            componentProps: {
              disabled: setData.isAuthor == 0,
            },
          },
          {
            field: 'editAuth',
            componentProps: { options: getOptionList('editAuth', setData.editAuth) },
          },
          {
            field: 'lookAuth',
            componentProps: {
              disabled: false,
              options: getOptionList('lookAuth', setData.lookAuth),
            },
          },
          {
            field: 'editEndTime',
            ifShow: data.editAuth == 2,
            componentProps: {
              disabled: checkAuthOther.editEndTime,
              disabledDate: (current) => {
                if (checkAuthOther.editEndTime) {
                  return (
                    current &&
                    (current < dayjs().startOf('day') ||
                      current > dayjs(checkAuthOther.editEndTime))
                  );
                } else {
                  return current && current < dayjs().startOf('day');
                }
              },
            },
          },
          {
            field: 'lookEndTime',
            ifShow: setData.lookAuth == 2,
            componentProps: {
              disabled: checkAuthOther.lookEndTime,
              disabledDate: (current) => {
                if (mylookEndTime) {
                  return (
                    current &&
                    (current < dayjs(mylookEndTime))
                  );
                } else {
                  return current && current < dayjs().startOf('day');
                }
              },
            },
          },
        ]);
      });
      function onFilterOption(inputText: string, option) {
        console.log('option', inputText, option.value);
        if (option.value) {
          return option.value.indexOf(inputText) >= 0;
        }
        // return option.value.indexOf(inputText.toUpperCase()) >= 0;
      }

      async function onSearch(searchText) {
        const list = await getByRyId({ ryId: searchText });
        optionsName.value =
          list.map((ele) => {
            return { ...ele, value: ele.ryId };
          }) || [];
        // console.log('paramList', optionsList);
        // optionsName.value = optionsList || [];
        updateSchema({
          field: 'ryId',
          componentProps: {
            options: optionsName.value,
          },
        });
      }
      const handleSubmit = async () => {
        try {
          const params = await validate();
          console.log('params', params);
          let canEditLook = params.isEmpower && params.isEmpower.some((item) => item == 1) ? 1 : 0;
          await addAuth({
            ...params,
            lookEndTime:
              params.lookAuth == 2 ? dayjs(params.lookEndTime).format('YYYY-MM-DD HH:mm:ss') : '',
            editEndTime:
              params.editAuth == 2 ? dayjs(params.editEndTime).format('YYYY-MM-DD HH:mm:ss') : '',
            canEditLook,
            canAuthLook:
              canEditLook || (params.isEmpower && params.isEmpower.some((item) => item == 0))
                ? 1
                : 0,
          });
          closeModal();
          resetFields();
          emit('update');
          createMessage.success('操作成功');
        } catch (error) {
          console.log('not passing', error);
        }
      };
      function setOption() {
        return [
          { label: '查看权限', value: 0, disabled: true },
          { label: '编辑权限', value: 1, disabled: isEdit.value },
        ];
      }
      function handleVisibleChange(_) {
        // console.log(v);
        // v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      function getOptionList(type: string, auth: any) {
        let optionList = {
          editAuth: [
            { label: '无权编辑', value: 0 },
            { label: '不限时编辑', value: 1 },
            { label: '限时编辑', value: 2 },
          ],
          lookAuth: [
            { label: '不限时查看', value: 1 },
            { label: '限时查看', value: 2 },
          ],
          isAuthor: [
            { label: '不可授权', value: 0 },
            { label: '可授权他人', value: 1 },
          ],
        };
        let option = optionList[type];
        if ((!auth && auth != 0) || auth == 1) {
          return option;
        } else if (auth == 2) {
          return option.map((ele) => {
            return {
              ...ele,
              disabled: ele.value == 1,
            };
          });
        } else {
          return option.map((ele) => {
            if (type == 'lookAuth' && ele.value == 2) {
              return {
                ...ele,
                disabled: false,
              };
            } else {
              return {
                ...ele,
                disabled: ele.value != 0,
              };
            }
          });
        }
      }
      return {
        register,
        schemas,
        registerForm,
        modelRef,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        getOptionList,
        addListFunc,
        resetFields,
        title,
        t,
        disabledTime,
      };
    },
  });
</script>