添加详情页

peiqiQQQ
Commit 83646df1 authored Apr 10, 2024 by peiqiQQQ
Showing with 179 additions and 9 deletions
src/views/conceptualBaseManagement/AddMatter.vue
src/views/conceptualBaseManagement/AddOrg.vue
src/views/conceptualBaseManagement/index.vue
src/views/demandManagement/Add.vue
src/views/demandManagement/Detail.vue
src/views/demandManagement/index.vue
--- a/src/views/conceptualBaseManagement/AddMatter.vue
+++ b/src/views/conceptualBaseManagement/AddMatter.vue
@@ -16,7 +16,7 @@
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()" size="mini">取 消</el-button>
-      <el-button type="primary" @click="handleSubmit()" size="mini"
+      <el-button type="primary" @click="handleSubmit()" size="mini" v-if="this.title != '详情'"
        >提 交</el-button
      >
    </span></el-dialog
@@ -57,6 +57,7 @@ export default {
          element: 'el-input', // 指定elementui组件
          placeholder: '请输入内容', // elementui组件属性
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          readonly: this.title == '详情' ? true : false,
        },
        {
          label: '创建人', // label文字
@@ -73,6 +74,7 @@ export default {
          element: 'el-date-picker', // 指定elementui组件
          initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
          placeholder: '请选择', // elementui组件属性
+          readonly: this.title == '详情' ? true : false,
        },
        {
          label: '事件描述', // label文字
@@ -82,6 +84,7 @@ export default {
          placeholder: '请输入内容', // elementui组件属性
          span: 24,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          readonly: this.title == '详情' ? true : false,
        },
        {
          label: '备注', // label文字
@@ -91,6 +94,7 @@ export default {
          placeholder: '请输入内容', // elementui组件属性
          span: 24,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          readonly: this.title == '详情' ? true : false,
        },
      ]
    },

--- a/src/views/conceptualBaseManagement/AddOrg.vue
+++ b/src/views/conceptualBaseManagement/AddOrg.vue
@@ -16,7 +16,7 @@
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()" size="mini">取 消</el-button>
-      <el-button type="primary" @click="handleSubmit()" size="mini"
+      <el-button type="primary" @click="handleSubmit()" size="mini" v-if="this.title != '详情'"
        >提 交</el-button
      >
    </span></el-dialog
@@ -60,6 +60,7 @@ export default {
          placeholder: '请输入内容', // elementui组件属性
          options: subjectType,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '机构名称', // label文字
@@ -67,6 +68,7 @@ export default {
          element: 'el-input', // 指定elementui组件
          placeholder: '请输入内容', // elementui组件属性
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '上级单位', // label文字
@@ -83,6 +85,7 @@ export default {
          placeholder: '请输入内容', // elementui组件属性
          span: 24,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
      ]
    },

--- a/src/views/conceptualBaseManagement/index.vue
+++ b/src/views/conceptualBaseManagement/index.vue
@@ -58,6 +58,14 @@
          <template #filesValue="{ data }">
            <span>{{ handleFileName(data) }}</span>
          </template>
+          <template #orgName="{ data }">
+              <el-button v-if="data.row.orgName" class="detailBtn" size="medium" @click="fnEdit(data.row, true)">{{data.row.orgName}}</el-button >
+              <span v-else>{{data.row.orgName}}</span>
+          </template>
+          <template #matterName="{ data }">
+              <el-button v-if="data.row.matterName" class="detailBtn" size="medium" @click="fnEdit(data.row, true)">{{data.row.matterName}}</el-button >
+              <span v-else>{{data.row.matterName}}</span>
+          </template>
        </table-config>
      </template>
    </list-page>
@@ -164,6 +172,7 @@ export default {
            label: '机构名称',
            prop: 'orgName',
            width: '300px',
+            __slotName: 'orgName',
          },
          {
            label: '主体类型',
@@ -184,6 +193,7 @@ export default {
            label: '事项名称',
            prop: 'matterName',
            width: '200px',
+            __slotName: 'matterName',
          },
          {
            label: '创建人',
@@ -294,13 +304,13 @@ export default {
          break
      }
    },
-    fnEdit(row) {
+    fnEdit(row, isDetail = false) {
      this.rowData = row
      if (this.activeName === '1') {
-        this.dialogTitle = '修改组织机构'
+        this.dialogTitle = isDetail ? '详情' : '修改组织机构'
        this.orgVisible = true
      } else {
-        this.dialogTitle = '修改事项'
+        this.dialogTitle = isDetail ? '详情' : '修改事项'
        this.matterVisible = true
      }
    },

--- a/src/views/demandManagement/Add.vue
+++ b/src/views/demandManagement/Add.vue
@@ -22,7 +22,7 @@
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()" size="mini">取 消</el-button>
-        <el-button type="primary" @click="handleSubmit" size="mini"
+        <el-button type="primary" @click="handleSubmit" size="mini" v-if="this.title != '详情'"
          >提 交</el-button
        >
      </span></el-dialog
@@ -87,6 +87,7 @@ export default {
          },
          filterable: true,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '批次年度', // label文字
@@ -97,12 +98,14 @@ export default {
          // initValue: new Date().format('yyyy'), // 字段初始值
          placeholder: '请选择', // elementui组件属性
          rules: [{ required: true, trigger: 'change', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '选择项目', // label文字
          prop: 'prjName', // 字段名
          __slotName: 'choosePrj',
          rules: [{ required: true, trigger: 'change', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '需求名称', // label文字
@@ -110,6 +113,7 @@ export default {
          element: 'el-input', // 指定elementui组件
          placeholder: '请输入内容', // elementui组件属性
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '关联机构', // label文字
@@ -117,6 +121,7 @@ export default {
          element: 'el-input', // 指定elementui组件
          placeholder: '请输入内容', // elementui组件属性
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '材料清单', // label文字
@@ -126,6 +131,7 @@ export default {
          options: materialOptions,
          multiple: true,
          rules: [{ required: true, trigger: 'change', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
        {
          label: '创建人', // label文字
@@ -153,6 +159,7 @@ export default {
          placeholder: '请输入内容', // elementui组件属性
          span: 24,
          rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
+          disabled: this.title == '详情' ? true : false,
        },
      ]
    },
@@ -186,6 +193,7 @@ export default {
      })
    },
    operation() {
+      if(this.title == '详情') return
      this.choosePrjVisible = true
    },
    handleAddParams() {

--- a/src/views/demandManagement/Detail.vue
+++ b/src/views/demandManagement/Detail.vue
+<template>
+    <el-dialog
+        :title="'详情'"
+        :visible.sync="showDialog"
+        :close-on-click-modal="false"
+        width="60%"
+        @close="showDialog = false"
+        @open="handleOpen"
+    >
+    <div>
+      <Form
+        ref="addForm"
+        :form-options="formOptions"
+        label-width="120px"
+      ></Form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="showDialog = false" size="mini">取 消</el-button>
+    </span>
+    </el-dialog >
+</template>
+<script>
+import Form from '@/components/Form.vue'
+export default {
+    components: { Form, },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        rowData: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    computed: {
+        formOptions() {
+            return [
+                {
+                    label: '批次年度', // label文字
+                    prop: 'year', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '批次名称', // label文字
+                    prop: 'batName', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '项目名称', // label文字
+                    prop: 'prjName', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '需求名称', // label文字
+                    prop: 'needName', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '关联组织机构', // label文字
+                    prop: 'orgName', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '所需材料', // label文字
+                    prop: 'fileList', // 字段名
+                    element: 'el-input', // 指定elementui组件
+                    disabled: true,
+                },
+                {
+                    label: '审核状态', // label文字
+                    prop: 'approveState', // 字段名
+                    element: 'el-select', // 指定elementui组件
+                    options: [
+                        { label: '新建', value: '1' },
+                        { label: '审批中', value: '2' },
+                        { label: '审批通过', value: '3' },
+                        { label: '驳回', value: '4' },
+                    ],
+                    disabled: true,
+                },
+                {
+                    label: '备注', // label文字
+                    prop: 'remark', // 字段名
+                    type: 'textarea',
+                    element: 'el-input', // 指定elementui组件
+                    placeholder: '请输入内容', // elementui组件属性
+                    span: 24,
+                    disabled: true,
+                },
+            ]
+        },
+        showDialog: {
+            get() {
+                return this.visible
+            },
+            set(value) {
+                this.$emit('update:visible', value)
+            },
+        },
+    },
+    methods: {
+        handleOpen() {
+            if (Object.keys(this.rowData).length) {
+                this.formOptions.forEach((v) => {
+                    v.initValue = this.rowData[v.prop]
+                })
+                this.$nextTick(() => {
+                    this.$refs['addForm'].addInitValue()
+                })
+            } else {
+                this.$nextTick(() => {
+                    this.$refs['addForm'].addInitValue()
+                    this.$refs['addForm'].onReset()
+                })
+            }
+        },
+    }
+}
+</script>
+<style>
+</style>
\ No newline at end of file
--- a/src/views/demandManagement/index.vue
+++ b/src/views/demandManagement/index.vue
@@ -38,9 +38,16 @@
          :columns="columns"
          :key="activeName"
        >
+        <template #batName="{ data }">
+            <el-button v-if="data.row.batName" class="detailBtn" size="medium" @click="fnEdit(data.row, true)">{{data.row.batName}}</el-button >
+            <span v-else>{{data.row.batName}}</span>
+        </template>
        </table-config>
      </template>
    </list-page>
+    <Detail 
+      :visible.sync="detailVisible"
+      :row-data="rowData"/>
    <!-- 新增弹窗 -->
    <Add
      @querySearch="querySearch"
@@ -68,6 +75,7 @@ import ListPage from '@/components/ListPage.vue'
 import SearchForm from '@/components/SearchForm.vue'
 import TableConfig from '@/components/TableConfig.vue'
 import Add from './Add.vue'
+import Detail from './Detail.vue'
 import ApprovalDialog from './ApprovalDialog.vue'
 import DemandSubDialog from '@/views/demandManagement/DemandSubDialog'
@@ -96,6 +104,7 @@ export default {
      dialogTitle: '',
      approvalVisible: false,
      demandSubVisible: false,
+      detailVisible: false, // 详情
    }
  },
  components: {
@@ -103,6 +112,7 @@ export default {
    SearchForm,
    TableConfig,
    Add,
+    Detail,
    ApprovalDialog,
    DemandSubDialog,
  },
@@ -165,7 +175,7 @@ export default {
        { type: 'selection', width: '55px' },
        { label: '序号', type: 'index', width: '80px' },
        { label: '批次年度', prop: 'year' },
-        { label: '批次名称', prop: 'batName', width: '200px' },
+        { label: '批次名称', prop: 'batName', width: '200px', __slotName: 'batName', },
        {
          label: '项目名称',
          prop: 'prjName',
@@ -433,10 +443,14 @@ export default {
        })
        .catch(() => {})
    },
-    fnEdit(row) {
+    fnEdit(row, isDetail=false) {
-      this.dialogTitle = '修改需求'
      this.rowData = row
+      if(this.activeName == '1'){
+        this.dialogTitle = isDetail ? '详情' : '修改需求'
        this.visible = true
+      }else{
+        this.detailVisible = true
+      }
    },
    fnDel(row) {
      this.$confirm('是否确认删除?', '提示', {