1

src/views/device/detailsMoadl.vue

@@ -18,97 +18,99 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, 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 { companyList } from '/@/api/customer';
-// import { sceneMove } from '/@/api/operate';
-import { downTemplate } from '/@/api/customer';
-import { cameraParam, cameraUpdate, cameraOut } from '/@/api/device';
-import { agentNewList } from '/@/api/dealer';
-import { CameraList } from '/@/api/order';
-import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n();
-interface Option {
-  value: string;
-}
+  import { defineComponent, ref, 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 { companyList } from '/@/api/customer';
+  // import { sceneMove } from '/@/api/operate';
+  import { downTemplate } from '/@/api/customer';
+  import { cameraParam, cameraUpdate, cameraOut } from '/@/api/device';
+  import { agentNewList } from '/@/api/dealer';
+  import { CameraList } from '/@/api/order';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  interface Option {
+    value: string;
+  }
 
-export default defineComponent({
-  components: { BasicModal, BasicForm },
-  props: {
-    userData: { type: Object },
-  },
-  emits: ['reload'],
-  setup(_, { emit }) {
-    const modelRef = ref({
-      isUpdate:false,
-    });
-    const title = ref('设备出库');
-    const optionsOrderSn = ref<Option[]>([]);
-    const optionsName = ref<Option[]>([]);
-    const fileFlow = reactive({
-      file: null,
-    });
-    const { createMessage } = useMessage();
-    const schemas: FormSchema[] = [
-      {
-        field: 'id',
-        component: 'Input',
-        label: 'id',
-        show: false,
-      },
-      {
-        field: 'outType',
-        component: 'Select',
-        label: '出库类型',
-        required: true,
-        colProps: {
-          span: 18,
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['reload'],
+    setup(_, { emit }) {
+      const modelRef = ref({
+        isUpdate: false,
+      });
+      const title = ref('设备出库');
+      const optionsOrderSn = ref<Option[]>([]);
+      const optionsName = ref<Option[]>([]);
+      const fileFlow = reactive({
+        file: null,
+      });
+      const { createMessage } = useMessage();
+      const schemas: FormSchema[] = [
+        {
+          field: 'id',
+          component: 'Input',
+          label: 'id',
+          show: false,
         },
-        componentProps: {
-          options: [
-            {
-              label: t('routes.product.outType.0'),
-              value: '0',
-              key: '0',
-            },{
-                  label: t('routes.product.outType.4'),
-                  value: '4',
-                  key: '4',
-             },
-            {
-              label: t('routes.product.outType.1'),
-              value: '1',
-              key: '1',
-            },
-            {
-              label: t('routes.product.outType.2'),
-              value: '2',
-              key: '2',
-            },
-            {
-              label: t('routes.product.outType.3'),
-              value: '3',
-              key: '3',
+        {
+          field: 'outType',
+          component: 'Select',
+          label: '出库类型',
+          required: true,
+          colProps: {
+            span: 18,
+          },
+          componentProps: {
+            options: [
+              {
+                label: t('routes.product.outType.0'),
+                value: '0',
+                key: '0',
+              },
+              {
+                label: t('routes.product.outType.4'),
+                value: '4',
+                key: '4',
+              },
+              {
+                label: t('routes.product.outType.1'),
+                value: '1',
+                key: '1',
+              },
+              {
+                label: t('routes.product.outType.2'),
+                value: '2',
+                key: '2',
+              },
+              {
+                label: t('routes.product.outType.3'),
+                value: '3',
+                key: '3',
+              },
+            ],
+            onChange: (value) => {
+              updateSchema([{ field: 'agentId', ifShow: value == '4' }]);
             },
-          ],
-          onChange:(value)=>{
-              updateSchema([{field: 'agentId',ifShow:value=='4',}])
-            }
+          },
         },
-      },{
-            field: 'agentId',
-            component: 'ApiSelect',
-            label: '经销商名称',
-            required: true,
-            ifShow:false,
-            componentProps: {
+        {
+          field: 'agentId',
+          component: 'ApiSelect',
+          label: '经销商名称',
+          required: true,
+          ifShow: false,
+          componentProps: {
             api: async function () {
-              const {list} = await agentNewList({pageSize:1000,pageNum:1});
-              console.log('agentNewList',list)
-              return list.map(ele => {
-                return {name:ele.name,value:ele.id}
+              const { list } = await agentNewList({ pageSize: 1000, pageNum: 1 });
+              console.log('agentNewList', list);
+              return list.map((ele) => {
+                return { name: ele.name, value: ele.id };
               });
             },
             numberToString: true,
@@ -119,137 +121,144 @@ export default defineComponent({
               agentName: '',
             },
           },
-            colProps: {
-              span: 18,
-            },
+          colProps: {
+            span: 18,
           },
-      {
-        field: 'companyName',
-        component: 'AutoComplete',
-        label: '客户名称',
-        colProps: {
-          span: 18,
         },
-        componentProps: {
-          filterOption: onFilterOption,
-          onSearch: async (searchText: string) => {
-            const {list} = await companyList({ companyName: searchText });
-            let optionsList = list.map((ele) => { return { ...ele,value: ele.companyName }; }) || []
-            console.log('paramList',optionsList)
-            optionsName.value = optionsList || [];
-            updateSchema({
-              field: 'companyName',
-              componentProps:{
-                options: optionsName.value,
-              },
-            })
+        {
+          field: 'companyName',
+          component: 'AutoComplete',
+          label: '客户名称',
+          colProps: {
+            span: 18,
           },
-          onChange: (data) => {
-            console.log('data', data);
+          componentProps: {
+            filterOption: onFilterOption,
+            onSearch: async (searchText: string) => {
+              const { list } = await companyList({ companyName: searchText });
+              let optionsList =
+                list.map((ele) => {
+                  return { ...ele, value: ele.companyName };
+                }) || [];
+              console.log('paramList', optionsList);
+              optionsName.value = optionsList || [];
+              updateSchema({
+                field: 'companyName',
+                componentProps: {
+                  options: optionsName.value,
+                },
+              });
+            },
+            onChange: (data) => {
+              console.log('data', data);
+            },
           },
         },
-      },
-      {
-        field: 'orderSn',
-        component: 'AutoComplete',
-        label: '订单号',
-        colProps: {
-          span: 18,
-        },
-        componentProps: {
-          options: optionsOrderSn.value,
-          filterOption: onFilterOption,
-          onSearch: async (searchText: string) => {
-            const { list } = await CameraList({ orderSn: searchText });
-            optionsOrderSn.value = !searchText ? [] : list.map((ele) => { return { value: ele.orderSn }; });
-            updateSchema({
-              field: 'orderSn',
-              componentProps:{
-                options: optionsOrderSn.value,
-              },
-            })
+        {
+          field: 'orderSn',
+          component: 'AutoComplete',
+          label: '订单号',
+          colProps: {
+            span: 18,
           },
-          onChange: (data) => {
-            console.log('data', data);
+          componentProps: {
+            options: optionsOrderSn.value,
+            filterOption: onFilterOption,
+            onSearch: async (searchText: string) => {
+              const { list } = await CameraList({ orderSn: searchText });
+              optionsOrderSn.value = !searchText
+                ? []
+                : list.map((ele) => {
+                    return { value: ele.orderSn };
+                  });
+              updateSchema({
+                field: 'orderSn',
+                componentProps: {
+                  options: optionsOrderSn.value,
+                },
+              });
+            },
+            onChange: (data) => {
+              console.log('data', data);
+            },
           },
         },
-      },
-    ];
-    const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
-      labelWidth: 120,
-      schemas,
-      showActionButtonGroup: false,
-      actionColOptions: {
-        span: 24,
-      },
-    });
-    onMounted(() => {});
-    let addListFunc = () => {};
-    const [register, { closeModal }] = useModalInner((data) => {
-      // console.log(data);
-      data && onDataReceive(data);
-    });
-
-    function onDataReceive(data) {
-      modelRef.value = data;
-      title.value = data.isUpdate?'编辑':'设备出库'
-      console.log('onDataReceive', data);
-      const { outType } = data;
-      let obj = t('routes.product.outType')
-      resetFields();
-      setFieldsValue({
-        type: obj[outType],
-        ...data,
+      ];
+      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      onMounted(() => {});
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        // console.log(data);
+        data && onDataReceive(data);
       });
-    }
 
-    const handleSubmit = async () => {
-      const apiUrl = modelRef.value.isUpdate?cameraUpdate:cameraOut
-      try {
-        const params = await validate();
-        console.log('params', params);
-        const res = await apiUrl(params);
-        console.log('res', res);
-        closeModal();
+      function onDataReceive(data) {
+        modelRef.value = data;
+        title.value = data.isUpdate ? '编辑' : '设备出库';
+        console.log('onDataReceive', data);
+        const { outType } = data;
+        let obj = t('routes.product.outType');
         resetFields();
-        createMessage.success(t('common.optSuccess'));
-        emit('reload');
-      } catch (error) {
-        console.log('not passing', error);
+        setFieldsValue({
+          type: obj[outType],
+          ...data,
+        });
       }
-    };
-    function onFilterOption(inputText: string, option: Option) {
-      return option.value.toUpperCase().indexOf(inputText.toUpperCase()) >= 0;
-    }
 
-    function handleVisibleChange(v) {
-      // console.log(v);
-      // v && props.userData && nextTick(() => onDataReceive(props.userData));
-    }
+      const handleSubmit = async () => {
+        const apiUrl = modelRef.value.isUpdate ? cameraUpdate : cameraOut;
+        try {
+          const params = await validate();
+          console.log('params', params);
+          const res = await apiUrl(params);
+          console.log('res', res);
+          closeModal();
+          resetFields();
+          createMessage.success(t('common.optSuccess'));
+          emit('reload');
+        } catch (error) {
+          console.log('not passing', error);
+        }
+      };
+      function onFilterOption(inputText: string, option: Option) {
+        return option.value.toUpperCase().indexOf(inputText.toUpperCase()) >= 0;
+      }
+
+      function handleVisibleChange(v) {
+        // console.log(v);
+        // v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
 
-    async function getTemplate() {
-      try {
-        const res = await downTemplate({ type: 2 });
-        console.log('res', res);
-      } catch (error) {
-        console.log('not passing', error);
+      async function getTemplate() {
+        try {
+          const res = await downTemplate({ type: 2 });
+          console.log('res', res);
+        } catch (error) {
+          console.log('not passing', error);
+        }
       }
-    }
-    return {
-      register,
-      schemas,
-      registerForm,
-      model: modelRef,
-      title,
-      fileFlow,
-      handleVisibleChange,
-      onFilterOption,
-      handleSubmit,
-      addListFunc,
-      resetFields,
-      t,
-      getTemplate,
-    };
-  },
-});
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        title,
+        fileFlow,
+        handleVisibleChange,
+        onFilterOption,
+        handleSubmit,
+        addListFunc,
+        resetFields,
+        t,
+        getTemplate,
+      };
+    },
+  });
 </script>

src/views/productOperation/modal/detailModal.vue

@@ -37,16 +37,17 @@
     emits: ['update', 'register'],
     setup(props, { emit }) {
       const modelRef = ref(false);
+      const isEdit = ref(true);
       const fileFlow = reactive({
         file: null,
       });
       const { createMessage } = useMessage();
-      const title = ref('新增客户')
+      const title = ref('新增客户');
       const schemas: FormSchema[] = [
         {
           field: 'id',
           component: 'Input',
-          show:false,
+          show: false,
           label: 'id',
           required: false,
         },
@@ -56,7 +57,7 @@
           label: '警员ID',
           required: true,
           colProps: {
-            span: 24,
+            span: 20,
           },
         },
         {
@@ -65,36 +66,57 @@
           label: '姓名',
           required: true,
           colProps: {
-            span: 24,
+            span: 20,
+          },
+          componentProps: {
+            disabled: true,
           },
         },
         {
-          field: 'view',
+          field: 'set',
           component: 'RadioGroup',
-          label: '查看权限',
-          defaultValue: 1,
+          label: '编辑权限',
+          defaultValue: 0,
           colProps: {
             span: 24,
           },
           componentProps: {
             options: [
-              { label: '不限时查看', value: 1 },
-              { label: '限时查看', value: 2 },
+              { label: '无权编辑', value: 0 },
+              { label: '不限时编辑', value: 1 },
+              { label: '限时编辑', value: 2 },
             ],
-            onChange: (value) => {
-              updateSchema({
-                field: 'viewTime',ifShow:value.target.value == 2
-              })
+            onChange: async (value) => {
+              let params = await getFieldsValue();
+              console.log('params', params);
+              isEdit.value = value.target.value == 0 ? true : false;
+              if (value.target.value == 1) {
+                params.view = 1;
+              }
+              params.isEmpower = isEdit.value ? [] : params.isEmpower;
+              setFieldsValue({...params, set: value.target.value});
+              updateSchema([
+                {
+                  field: 'setTime',
+                  ifShow: value.target.value == 2,
+                },
+                {
+                  field: 'isEmpower',
+                  componentProps: {
+                    options: setOption(),
+                  },
+                },
+              ]);
             },
           },
         },
         {
-          field: 'viewTime',
+          field: 'setTime',
           component: 'DatePicker',
-          label: '查看到期日期',
-          ifShow:false,
+          label: '编辑到期日期',
+          ifShow: false,
           required: true,
-          defaultValue:dayjs().add(1,'month').format('YYYY-MM-DD HH:mm'),
+          defaultValue: dayjs().add(1, 'month').format('YYYY-MM-DD HH:mm'),
           componentProps: {
             disabled: false,
             'show-time': true,
@@ -106,30 +128,30 @@
           },
         },
         {
-          field: 'set',
+          field: 'view',
           component: 'RadioGroup',
-          label: '编辑权限',
-          defaultValue: 0,
+          label: '查看权限',
+          defaultValue: 1,
           colProps: {
             span: 24,
           },
           componentProps: {
             options: [
-              { label: '无权编辑', value: 0 },
-              { label: '不限时编辑', value: 1 },
-              { label: '限时编辑', value: 2 },
+              { label: '不限时查看', value: 1 },
+              { label: '限时查看', value: 2 },
             ],
             onChange: (value) => {
               updateSchema({
-                field: 'setTime', ifShow: value.target.value == 2,
-              })
+                field: 'viewTime',
+                ifShow: value.target.value == 2,
+              });
             },
           },
         },
         {
-          field: 'setTime',
+          field: 'viewTime',
           component: 'DatePicker',
-          label: '编辑到期日期',
+          label: '查看到期日期',
           ifShow: false,
           required: true,
           defaultValue: dayjs().add(1, 'month').format('YYYY-MM-DD HH:mm'),
@@ -158,8 +180,9 @@
             ],
             onChange: (value) => {
               updateSchema({
-                field: 'isEmpower', ifShow: value.target.value == 1,
-              })
+                field: 'isEmpower',
+                ifShow: value.target.value == 1,
+              });
             },
           },
         },
@@ -172,15 +195,12 @@
             span: 24,
           },
           componentProps: {
-            options: [
-              { label: '查看权限', value: 0 },
-              { label: '编辑权限', value: 1 },
-            ],
+            options: setOption(),
           },
         },
       ];
-      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
-        labelWidth: 120,
+      const [registerForm, { validate, getFieldsValue, resetFields, setFieldsValue, updateSchema }] = useForm({
+        labelWidth: 110,
         schemas,
         showActionButtonGroup: false,
         actionColOptions: {
@@ -191,21 +211,20 @@
       onMounted(() => {});
       let addListFunc = () => {};
       const [register, { closeModal }] = useModalInner((data) => {
-        console.log('data',data)
+        console.log('data', data);
         if (data) {
-          title.value =data.id?'编辑授权':'新增授权'
-          modelRef.value = data.id?true:false;
+          title.value = data.id ? '编辑授权' : '新增授权';
+          modelRef.value = data.id ? true : false;
           setFieldsValue(data);
-        }else{
-          title.value ='新增客户'
+        } else {
+          title.value = '新增客户';
         }
         updateSchema([
-          {field: 'isEmpower', ifShow: false,},
-          {field: 'setTime', ifShow: false,},
-          {field: 'viewTime', ifShow: false,},
-        ])
+          { field: 'isEmpower', ifShow: false },
+          { field: 'setTime', ifShow: false },
+          { field: 'viewTime', ifShow: false },
+        ]);
       });
-
       // function onDataReceive(data) {
       //   modelRef.value = data;
       //   resetFields();
@@ -216,12 +235,12 @@
       const handleSubmit = async () => {
         try {
           const params = await validate();
-          console.log('params',params)
+          console.log('params', params);
           const apiData = {
             ...params,
-            floorLogo: params.floorLogo && params.floorLogo[0] || '',
-            qrLogo: params.qrLogo && params.qrLogo[0] || '',
-            topLogo: params.topLogo && params.topLogo[0] || '',
+            floorLogo: (params.floorLogo && params.floorLogo[0]) || '',
+            qrLogo: (params.qrLogo && params.qrLogo[0]) || '',
+            topLogo: (params.topLogo && params.topLogo[0]) || '',
           };
           console.log(modelRef.value);
           let tips: string;
@@ -242,6 +261,12 @@
           console.log('not passing', error);
         }
       };
+      function setOption() {
+        return [
+          { label: '查看权限', value: 0 },
+          { label: '编辑权限', value: 1, disabled: isEdit.value },
+        ];
+      }
       function handleVisibleChange(_) {
         // console.log(v);
         // v && props.userData && nextTick(() => onDataReceive(props.userData));