eoss-ui 0.3.97

package/packages/flow-list/src/flow-table.vue

@@ -0,0 +1,445 @@
+<template>
+  <div style="height:100%">
+    <es-data-table :data="data" border style="width: 100%">
+      <el-table-column type="index" align="center" label="序号" width="50">
+      </el-table-column>
+      <el-table-column
+        prop="deptid"
+        align="center"
+        label="经办部门"
+        width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="步骤"
+        width="110"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope"
+          ><span :title="scope.row.itemname">{{
+            scope.row.itemid
+          }}</span></template
+        >
+      </el-table-column>
+      <el-table-column align="center" label="办理人" width="110">
+        <template slot-scope="scope"
+          ><span :title="scope.row.userName">{{
+            scope.row.userid
+          }}</span></template
+        >
+      </el-table-column>
+      <el-table-column
+        label="状态"
+        align="center"
+        width="60"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope"
+          ><div
+            :style="
+              `${
+                scope.row.pendstate == 0 || scope.row.pendstate == 3
+                  ? 'color:red'
+                  : scope.row.pendstate == 1
+                  ? 'color:green'
+                  : 'color:deepskyblue'
+              }`
+            "
+            v-html="scope.row.querykeywords"></div
+          ></template
+        >
+      </el-table-column>
+      <el-table-column align="center" label="办理意见" show-overflow-tooltip>
+        <template slot-scope="scope"
+          ><span>{{
+            scope.row.doresult || scope.row.handleInfo
+          }}</span></template
+        >
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="验签"
+        width="70"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope"
+          ><span style="color:deepskyblue">{{
+            scope.row.authTypeStr
+          }}</span></template
+        >
+      </el-table-column>
+      <el-table-column align="center" label="附件" width="70">
+        <template slot-scope="scope">
+          <div class="file" @click="showFile(scope.row.wfpendingid)">
+            <span
+              v-show="scope.row.hasAdjunct"
+              class="iconfont es-icon-fujian"
+              :style="fileStyle || 'color:red;font-size:20px'"
+            ></span></div
+        ></template>
+      </el-table-column>
+      <el-table-column width="130" align="center" label="时间">
+        <template slot-scope="scope">{{ scope.row.doetime | date }}</template>
+      </el-table-column>
+      <!-- <el-table-column align="center" prop="itemname" label="提醒" show-overflow-tooltip>
+    </el-table-column> -->
+      <el-table-column
+        align="center"
+        width="80"
+        prop="douserid"
+        label="代办人"
+        v-if="hasAgent == '1'"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="催办"
+        width="60"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">
+          <span
+            style="color:deepskyblue;cursor: pointer;"
+            @click="goPress(scope.row.id)"
+            >{{ scope.row.pressTimes }}</span
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        :width="modify ? '130' : '100'"
+        label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button v-show="scope.row.canDelete" @click="del(scope.row.id)"
+            >删除</el-button
+          >
+          <el-button
+            v-show="modify && scope.row.pendstate == 2"
+            @click="hadelModify(scope.row.id)"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </es-data-table>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="查看附件"
+      :visible.sync="showFileList"
+      v-if="showFileList"
+    >
+      <FileList
+        :ownId="wfpendingid"
+        :code="adjunctCode"
+        :deleted="false"
+        :disabled="true"
+        @cancel="showFileList = false"
+      />
+    </es-dialog>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="查看催办记录"
+      :visible.sync="showPress"
+      height="500px"
+      v-if="showPress"
+    >
+      <div style="height:400px" v-loading="pressLoading">
+        <es-data-table
+          :data="pressTableList"
+          :thead="pressThead"
+          stripe
+          full
+          style="width: 100%"
+          @sort-change="sortChange"
+        />
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 20, 30, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          class="pagination"
+        >
+        </el-pagination>
+      </div>
+    </es-dialog>
+    <es-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      title="删除"
+      :visible.sync="showDel"
+      height="auto"
+      class="del-flow"
+      v-if="showDel"
+    >
+      <es-form
+        v-loading="delLoading"
+        :model="formData"
+        :contents="formItemList"
+        @submit="handleFormSubmit"
+      >
+      </es-form>
+    </es-dialog>
+  </div>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+import FileList from '../../flow/src/component/FileList.vue';
+import { pressListJson, deleteFlow } from 'eoss-ui/src/config/api';
+export default {
+  name: 'FlowTable',
+  components: {
+    [FileList.name]: FileList
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    adjunctCode: {
+      type: String,
+      default: ''
+    },
+    fileStyle: {
+      default: ''
+    },
+    modify: {
+      type: Boolean,
+      default: false
+    },
+    hasAgent: {
+      type: String,
+      default: '1'
+    }
+  },
+  filters: {
+    date(val) {
+      return util.formatDate(val, 'yyyy-MM-dd HH:mm');
+    }
+  },
+  data() {
+    return {
+      showFileList: false,
+      showPress: false,
+      showDel: false,
+      currentPage: 1,
+      pageSize: 20,
+      wfpendingid: '',
+      delLoading: false,
+      pressLoading: false,
+      pressTableList: [],
+      formItemList: [
+        {
+          name: 'reason',
+          label: '删除原因',
+          type: 'textarea',
+          placeholder: '请输入删除原因',
+          rules: {
+            required: true,
+            message: '请输入删除原因',
+            trigger: 'blur'
+          },
+          value: '',
+          rows: 5
+        },
+        {
+          type: 'submit',
+          skin: 'lay-form-btns',
+          contents: [
+            {
+              type: 'primary',
+              plain: true,
+              text: '保存',
+              event: 'confirm'
+            }
+          ]
+        }
+      ],
+      formData: { reason: '' },
+      historyId: '',
+      sidx: '',
+      sord: '',
+      total: 0,
+      pressThead: [
+        {
+          title: '催办节点',
+          align: 'center',
+          sortable: true,
+          field: 'urge_item'
+        },
+        {
+          title: '催办人名称',
+          sortable: true,
+          align: 'center',
+          field: 'urge_man_name'
+        },
+        {
+          title: '催办时间',
+          sortable: true,
+          align: 'center',
+          field: 'urge_time'
+        },
+        {
+          title: '被催办人名称',
+          align: 'center',
+          sortable: true,
+          field: 'urged_man_name'
+        }
+      ]
+    };
+  },
+  methods: {
+    /**
+     * handleFormSubmit
+     * @desc:删除节点点击事件
+     * @param {Object} formData 点击删除的form数据
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleFormSubmit(formData) {
+      this.delLoading = true;
+      let params = {
+        url: deleteFlow,
+        method: 'POST',
+        data: { id: this.historyId, reason: formData.reason }
+      };
+      util
+        .ajax(params)
+        .then(res => {
+          const { status, message } = res;
+          this.delLoading = false;
+          if (status === 'success') {
+            this.$message.success('删除成功');
+            this.showDel = false;
+            this.$emit('success');
+          } else {
+            this.$message.error(message || '系统错误，请联系管理员！');
+          }
+        })
+        .catch(err => {
+          this.delLoading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    /**
+     * del
+     * @desc:展示删除弹窗
+     * @param {String} id 当前点击数据id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    del(id) {
+      this.historyId = id;
+      this.showDel = true;
+    },
+    /**
+     * hadelModify
+     * @desc:展示修改弹窗
+     * @param {String} id 当前点击数据id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    hadelModify(id) {
+      this.$message.warning('暂未开放，敬请期待！');
+    },
+    /**
+     * handleSizeChange
+     * @desc:监听每页数据显示数量变化
+     * @param {String} val 每页展示数量
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getPressList();
+    },
+    /**
+     * handleCurrentChange
+     * @desc:监听页码变化
+     * @param {String} val 当前页
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getPressList();
+    },
+    /**
+     * sortChange
+     * @desc:监听排序变化
+     * @param {Object} info 需要排序的字段及排序方式
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    sortChange(info) {
+      let { prop, order } = info;
+      this.sidx = prop;
+      this.sord = order.replace('ending', '');
+      this.getPressList();
+    },
+    /**
+     * getPressList
+     * @desc:催办列表数据
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    getPressList() {
+      const { historyId, pageSize, sidx, sord, currentPage } = this;
+      this.pressLoading = true;
+      let params = {
+        url: pressListJson,
+        params: { historyId },
+        method: 'POST',
+        data: { page: currentPage, rows: pageSize, sidx, sord }
+      };
+      util
+        .ajax(params)
+        .then(res => {
+          this.pressTableList = res.data;
+          this.total = res.totalrecords;
+          this.pressLoading = false;
+        })
+        .catch(err => {
+          this.pressLoading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    /**
+     * showFile
+     * @desc:附件查看
+     * @param {String} ownId 附件id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    showFile(ownId) {
+      this.wfpendingid = ownId;
+      this.showFileList = true;
+    },
+    /**
+     * goPress
+     * @desc:催办列表查看
+     * @param {String} id 催办列表id
+     * @author liufan
+     * @date 2022年11月29日
+     **/
+    goPress(id) {
+      this.historyId = id;
+      this.showPress = true;
+      this.getPressList();
+    }
+  }
+};
+</script>
+
+<style></style>