|
@@ -0,0 +1,172 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="hui-flex hui-dialog hui-content">
|
|
|
|
+ <div class="hui-flex-box hui-flex hui-table">
|
|
|
|
+ <div class="hui-content-insert">
|
|
|
|
+ <el-button type="primary" size="medium" @click="insertRow">新增模板字段</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hui-flex-box">
|
|
|
|
+ <el-table :data="tableData" row-key="id" border height="100%">
|
|
|
|
+ <el-table-column label="序号" width="50">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div style="text-align: center;">{{scope.$index + 1}}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="字段名称" prop="name"></el-table-column>
|
|
|
|
+ <el-table-column label="字段代码" prop="code"></el-table-column>
|
|
|
|
+ <el-table-column label="字段类型">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{$field.findTypeName('fieldType',scope.row.type)}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div class="hui-table-operation">
|
|
|
|
+ <span class="table-operation" @click="look(scope.row)">
|
|
|
|
+ 详情
|
|
|
|
+ </span>
|
|
|
|
+ <span class="table-operation" @click="updateRow(scope.row)">
|
|
|
|
+ 编辑
|
|
|
|
+ </span>
|
|
|
|
+ <span class="table-operation" @click="deleteRow(scope.row)">
|
|
|
|
+ 删除
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <template slot="empty">
|
|
|
|
+ <empty description="暂无数据"></empty>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px" :append-to-body="true">
|
|
|
|
+ <field-edit v-if="visible" @callback="callback" :isUpdate="isUpdate" :detailId="detailId"
|
|
|
|
+ :templateId="templateId">
|
|
|
|
+ </field-edit>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <el-drawer title="项目详情" :visible.sync="drawer" :size="400" :append-to-body="true">
|
|
|
|
+ <field-detail v-if="drawer" :detailId="detailId"></field-detail>
|
|
|
|
+ </el-drawer>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ getFieldList,
|
|
|
|
+ deleteField
|
|
|
|
+ } from '@/httpApi/contract'
|
|
|
|
+ import fieldEdit from '@/components/work/contract/template/fieldEdit'
|
|
|
|
+ import fieldDetail from '@/components/work/contract/template/fieldDetail'
|
|
|
|
+ export default {
|
|
|
|
+ props: ['templateId'],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ tableData: [],
|
|
|
|
+ visible: false,
|
|
|
|
+ detailId: '',
|
|
|
|
+ isUpdate: false,
|
|
|
|
+ drawer: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.init();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ getFieldList({
|
|
|
|
+ documentTemplateId: this.templateId
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.tableData = res.data;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ insertRow() {
|
|
|
|
+ this.isUpdate = false;
|
|
|
|
+ this.visible = true;
|
|
|
|
+ },
|
|
|
|
+ updateRow(item) {
|
|
|
|
+ this.detailId = item.id;
|
|
|
|
+ this.isUpdate = true;
|
|
|
|
+ this.visible = true;
|
|
|
|
+ },
|
|
|
|
+ deleteRow(item) {
|
|
|
|
+ this.$confirm('确定要删除该字段?', () => {
|
|
|
|
+ deleteField(item.id).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.$message.success('操作成功');
|
|
|
|
+ this.init();
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ callback(type) {
|
|
|
|
+ if (type === 'init') this.init();
|
|
|
|
+ this.visible = false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ fieldEdit,
|
|
|
|
+ fieldDetail
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .field-data {
|
|
|
|
+ table {
|
|
|
|
+ width: 100%;
|
|
|
|
+ border: 1px solid $--color-border;
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ table-layout: fixed;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ table th {
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ border: 1px solid $--color-border;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ table td {
|
|
|
|
+ border: 1px solid $--color-border;
|
|
|
|
+ padding: 6px 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .insert-icon {
|
|
|
|
+ text-align: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ border: 1px dashed $--color-border;
|
|
|
|
+ line-height: 26px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+
|
|
|
|
+ .huifont-xinzeng {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .td-icon {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ background: #171F2D;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ border: 1px solid #8596B0;
|
|
|
|
+ opacity: 0.6;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ color: #8596B0;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .td-icon:hover {
|
|
|
|
+ color: $--color-red;
|
|
|
|
+ border-color: $--color-red;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconfont {
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ margin-left: 1px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|