|
|
@@ -1,9 +1,18 @@
|
|
|
-import { ref, defineComponent, computed, onMounted, onUnmounted } from 'vue';
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ defineComponent,
|
|
|
+ computed,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
+ reactive,
|
|
|
+} from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
+import { upload, UploadData } from '@/api/common';
|
|
|
import cloneDeep from 'lodash/cloneDeep';
|
|
|
import div from '@/components/div';
|
|
|
import { useCommonStore, useIncidentStore } from '@/store';
|
|
|
import QueryMap from '@/components/QueryMap';
|
|
|
+import { BaseMediaUrl} from '@/utils/index';
|
|
|
// import MediaUpload from '@/components/MediaUpload';
|
|
|
import './index.scss';
|
|
|
import {
|
|
|
@@ -26,7 +35,9 @@ import {
|
|
|
Button,
|
|
|
Notify,
|
|
|
Uploader,
|
|
|
+ UploaderFileListItem,
|
|
|
} from 'vant';
|
|
|
+import { isArray } from 'lodash';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'IncidentManagementReport',
|
|
|
@@ -45,11 +56,30 @@ export default defineComponent({
|
|
|
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
+ const isshowprew = ref(false);
|
|
|
+ const videosrclist = reactive([]);
|
|
|
+ const imagessrclist = reactive([]);
|
|
|
+ const videop = ref();
|
|
|
+ const videopsrc = ref("");
|
|
|
+
|
|
|
+ const handleUpload = (file) => {
|
|
|
+ upload(file).then((res) => {
|
|
|
+ let type = /\w+([.jpg|.png|.gif|.swf|.bmp|.jpeg]){1}$/.test(
|
|
|
+ res.data.fileName?.substr( res.data.fileName?.lastIndexOf('.') + 1 ) ?? '',
|
|
|
+ );
|
|
|
+ if (!type) {
|
|
|
+ videosrclist.push(res.data);
|
|
|
+ } else {
|
|
|
+ imagessrclist.push(res.data);;
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch((error)=>{
|
|
|
+
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
const handleSaveReport = () => {
|
|
|
const { id } = route.query;
|
|
|
- console.log(1111111111);
|
|
|
- console.log(form);
|
|
|
|
|
|
const saveFn = id ? store.putIncidentItem : store.postIncidentItem;
|
|
|
// console.log(formRef);
|
|
|
@@ -58,37 +88,11 @@ export default defineComponent({
|
|
|
...form.value,
|
|
|
level: Number(form.value.level) ?? null,
|
|
|
type: Number(form.value.type) ?? null,
|
|
|
+ pic: imagessrclist.map((i: UploadData) => i.url).join(','),
|
|
|
+ video: videosrclist.map((i: UploadData) => i.url).join(','),
|
|
|
// status: route.params.status as unknown as number,
|
|
|
});
|
|
|
|
|
|
- // if (result) {
|
|
|
- // // router.push(`/status/${route.params.status}/report`)
|
|
|
- // router.replace(
|
|
|
- // `/incident-management/status/${route.params.status}`,
|
|
|
- // );
|
|
|
- // }
|
|
|
- // formRef.value.validate(async (valid: boolean) => {
|
|
|
- // if (valid) {
|
|
|
- // if (!form.value.locations) {
|
|
|
- // Notify({
|
|
|
- // type: 'danger',
|
|
|
- // message: '需要点击确认按钮确认是否正确',
|
|
|
- // });
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // const result = await saveFn({
|
|
|
- // ...form.value,
|
|
|
- // level: Number(form.value.level) ?? null,
|
|
|
- // type: Number(form.value.type) ?? null,
|
|
|
- // status: route.params.status as unknown as number,
|
|
|
- // });
|
|
|
- // if (result) {
|
|
|
- // router.replace(
|
|
|
- // `/incident-management/status/${route.params.status}`,
|
|
|
- // );
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
};
|
|
|
|
|
|
onMounted(async () => {
|
|
|
@@ -121,6 +125,19 @@ export default defineComponent({
|
|
|
fixed
|
|
|
onClick-left={() => router.push('/home')}
|
|
|
/>
|
|
|
+ <Popup
|
|
|
+ style="width:100%;background:rgba(0,0,0,0)"
|
|
|
+ v-model:show={isshowprew.value}
|
|
|
+ onClose={() => {
|
|
|
+ videop.value.pause();
|
|
|
+ }}>
|
|
|
+ <video
|
|
|
+ ref={videop}
|
|
|
+ src={videopsrc.value}
|
|
|
+ controls
|
|
|
+ autoplay="true"
|
|
|
+ style="width:100%"></video>
|
|
|
+ </Popup>
|
|
|
<Form>
|
|
|
<CellGroup>
|
|
|
<Field
|
|
|
@@ -158,14 +175,16 @@ export default defineComponent({
|
|
|
rules={[{ required: true, message: '事件类型必填' }]}
|
|
|
onClick={() => (showCreateTypeByPicker.value = true)}
|
|
|
/>
|
|
|
- <Popup v-model:show={showCreateTypeByPicker.value} position="bottom">
|
|
|
+ <Popup
|
|
|
+ v-model:show={showCreateTypeByPicker.value}
|
|
|
+ position="bottom">
|
|
|
<Picker
|
|
|
columns={commonStore.globalDict['zhdd_incident_type']?.map(
|
|
|
(i) => ({ text: i.dictLabel, value: i.dictValue }),
|
|
|
)}
|
|
|
onConfirm={(value) => {
|
|
|
- form.value.typeText = value.text;
|
|
|
- form.value.type = value.value;
|
|
|
+ form.value.typeText = value.text;
|
|
|
+ form.value.type = value.value;
|
|
|
console.log(value, '---');
|
|
|
|
|
|
showCreateTypeByPicker.value = false;
|
|
|
@@ -243,7 +262,37 @@ export default defineComponent({
|
|
|
placeholder="请输入"
|
|
|
v-slots={{
|
|
|
input: () => (
|
|
|
- <Uploader accept="video/*" v-model={form.value.video} />
|
|
|
+ <Uploader
|
|
|
+ accept="video/*"
|
|
|
+ v-model={form.value.video}
|
|
|
+ afterRead={(
|
|
|
+ file: UploaderFileListItem | UploaderFileListItem[],
|
|
|
+ ) => {
|
|
|
+ handleUpload((isArray(file) ? file[0] : file).file);
|
|
|
+ return false;
|
|
|
+ }}
|
|
|
+ onDelete={(filep, detail) => {
|
|
|
+ videosrclist.splice(detail.index, 1);
|
|
|
+ console.log(videosrclist);
|
|
|
+ }}
|
|
|
+ onClick-preview={(index) => {
|
|
|
+ isshowprew.value = true;
|
|
|
+ try {
|
|
|
+ videopsrc.value = URL.createObjectURL(index.file);
|
|
|
+ videop.value.play();
|
|
|
+ videop.value.currentTime = 0;
|
|
|
+ } catch (error) {}
|
|
|
+ }}
|
|
|
+
|
|
|
+ // v-slots={{
|
|
|
+ // 'preview-cover': () => (
|
|
|
+ // <video
|
|
|
+ // style="width:100%;height:100%"
|
|
|
+ // controls
|
|
|
+ // src="https://vod-progressive.akamaized.net/exp=1643032410~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2673%2F7%2F188365455%2F623960082.mp4~hmac=e4a0fb352e805ff4fe74317441bf6f6deb059508cc7bb2f7aa92884023b13818/vimeo-prod-skyfire-std-us/01/2673/7/188365455/623960082.mp4?filename=Emoji+Saver+-+Drama.mp4"></video>
|
|
|
+ // ),
|
|
|
+ // }}
|
|
|
+ />
|
|
|
),
|
|
|
}}
|
|
|
/>
|
|
|
@@ -253,7 +302,20 @@ export default defineComponent({
|
|
|
placeholder="请输入"
|
|
|
v-slots={{
|
|
|
input: () => (
|
|
|
- <Uploader accept="image/*" v-model={form.value.pic} />
|
|
|
+ <Uploader
|
|
|
+ accept="image/*"
|
|
|
+ v-model={form.value.pic}
|
|
|
+ onDelete={(filep, detail) => {
|
|
|
+ imagessrclist.splice(detail.index, 1);
|
|
|
+ console.log(imagessrclist);
|
|
|
+ }}
|
|
|
+ afterRead={(
|
|
|
+ file: UploaderFileListItem | UploaderFileListItem[],
|
|
|
+ ) => {
|
|
|
+ handleUpload((isArray(file) ? file[0] : file).file);
|
|
|
+ return false;
|
|
|
+ }}
|
|
|
+ />
|
|
|
),
|
|
|
}}
|
|
|
/>
|
|
|
@@ -268,159 +330,6 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</ActionBar>
|
|
|
</Form>
|
|
|
- {/* <el-form ref={formRef} model={form} label-width="120px">
|
|
|
- <el-form-item
|
|
|
- label="事件标题"
|
|
|
- required
|
|
|
- prop="name"
|
|
|
- rules={{ required: true, message: '事件标题必填' }}>
|
|
|
- <el-input
|
|
|
- v-model={form.value.name}
|
|
|
- placeholder="请输入"
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-row>
|
|
|
- <el-col span={12}>
|
|
|
- <el-form-item
|
|
|
- label="上报人"
|
|
|
- required
|
|
|
- prop="createBy"
|
|
|
- rules={{ required: true, message: '上报人必填' }}>
|
|
|
- <el-input
|
|
|
- size="small"
|
|
|
- v-model={form.value.createBy}
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col span={12}>
|
|
|
- <el-form-item
|
|
|
- label="上报单位"
|
|
|
- required
|
|
|
- prop="createDept"
|
|
|
- rules={{ required: true, message: '上报单位必填' }}>
|
|
|
- <el-select
|
|
|
- size="small"
|
|
|
- v-model={form.value.createDept}
|
|
|
- placeholder="请选择">
|
|
|
- {commonStore.globalDict['zhdd_org_upload']?.map((item) => (
|
|
|
- <el-option
|
|
|
- key={item.dictValue}
|
|
|
- label={item.dictLabel}
|
|
|
- value={item.dictValue}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col span={12}>
|
|
|
- <el-form-item
|
|
|
- label="事件类型"
|
|
|
- required
|
|
|
- prop="type"
|
|
|
- rules={{ required: true, message: '事件类型必填' }}>
|
|
|
- <el-select
|
|
|
- size="small"
|
|
|
- v-model={form.value.type}
|
|
|
- placeholder="请选择">
|
|
|
- {commonStore.globalDict['zhdd_incident_type']?.map((item) => (
|
|
|
- <el-option
|
|
|
- key={item.dictValue}
|
|
|
- label={item.dictLabel}
|
|
|
- value={item.dictValue}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col span={12}>
|
|
|
- <el-form-item
|
|
|
- label="事件等级"
|
|
|
- required
|
|
|
- prop="level"
|
|
|
- rules={{ required: true, message: '事件等级必填' }}>
|
|
|
- <el-select
|
|
|
- size="small"
|
|
|
- v-model={form.value.level}
|
|
|
- placeholder="请选择">
|
|
|
- {commonStore.globalDict['zhdd_incident_level']?.map(
|
|
|
- (item) => (
|
|
|
- <el-option
|
|
|
- key={item.dictValue}
|
|
|
- label={item.dictLabel}
|
|
|
- value={item.dictValue}
|
|
|
- />
|
|
|
- ),
|
|
|
- )}
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-form-item label="事件描述">
|
|
|
- <el-input
|
|
|
- size="small"
|
|
|
- v-model={form.value.des}
|
|
|
- placeholder="请输入"
|
|
|
- type="textarea"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="事件地点"
|
|
|
- required
|
|
|
- prop="addr"
|
|
|
- rules={{ required: true, message: '事件地点必填' }}>
|
|
|
- <el-input
|
|
|
- v-model={form.value.addr}
|
|
|
- placeholder="请输入"
|
|
|
- size="small"
|
|
|
- onChange={(add: string) => {
|
|
|
- addr.value = add;
|
|
|
- }}
|
|
|
- />
|
|
|
- <QueryMap
|
|
|
- address={addr.value}
|
|
|
- v-model:locations={form.value.locations}
|
|
|
- v-model:longitude={(form.value.locations ?? '').split(',')[0]}
|
|
|
- v-model:latitude={(form.value.locations ?? '').split(',')[1]}
|
|
|
- onChoose={(name) => {
|
|
|
- form.value.addr = name;
|
|
|
- }}
|
|
|
- onRestPositon={() => {
|
|
|
- addr.value = store.incidentDetail.baseInfo?.addr ?? '';
|
|
|
- form.value.addr = store.incidentDetail.baseInfo?.addr;
|
|
|
- form.value.locations = store.incidentDetail.baseInfo?.locations;
|
|
|
- }}
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传视频">
|
|
|
- <MediaUpload
|
|
|
- v-model:media={form.value.video}
|
|
|
- mediaType="video"
|
|
|
- accept="video/*">
|
|
|
- <i class="el-icon-video-play" />
|
|
|
- <span>上传视频</span>
|
|
|
- </MediaUpload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传图片">
|
|
|
- <MediaUpload v-model:media={form.value.pic} accept="image/*">
|
|
|
- <i class="el-icon-plus" />
|
|
|
- <span>上传图片</span>
|
|
|
- </MediaUpload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button size="small" type="primary" onClick={handleSaveReport}>
|
|
|
- 保存
|
|
|
- </el-button>
|
|
|
- <el-button size="small" onClick={() => router.back()}>
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form> */}
|
|
|
</div>
|
|
|
);
|
|
|
},
|
